0

我有以下问题：我得到了一个动态生成的缩略图列表，我既不能给图像提供类也不能提供 id 属性。该列表如下所示：

<div id="list">
        <ul id="clips">
            <li class="inactive"><a href=""><img src="http://farm4.staticflickr.com/3731/buddyicons/30470506@N05.jpg?1377890675#30470506@N05"/></a></li>
            <li class="inactive"><a href=""><img src="http://farm8.staticflickr.com/7406/9704752996_361b1f64a7_s.jpg"/></a></li>
            <li class="inactive"><a href=""><img src="http://farm6.staticflickr.com/5545/9703755774_818c649c7c_s.jpg"/></a></li>
            <li class="active"><a href=""><img src="http://farm3.staticflickr.com/2892/buddyicons/98149247@N02.jpg?1377034353#98149247@N02"/></a></li>                
        </ul>
</div>

如您所见，类属性“活动”有一个列表元素。我给了这个另一种风格。但我希望上一张和下一张图片也有不同的风格。现在的问题是：如何选择它们？

我做了一些试验，能够选择上一个和下一个列表元素，并且可以更改它们的样式。它的代码是：

<script type="text/javascript" src="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('li.active').prev().css('background-color', 'red');
            $('li.active').prev().css('height', '300px');
            $('li.active').next().css('background-color', 'red');
            $('li.active').next().css('height', '300px');
       });
    </script>

这适用于列表元素。但我需要选择图像。不幸的是“li.active img”没有工作，不幸的是我无法更改 php 代码，以便图像具有类名。那么有没有办法选择这两个图像并使用 jquery 更改它们的样式？

问候

4

3 回答 3

0

您可以使用以下任何一种

只需将类添加到图像

   $(document).ready(function () {
        $('li.active').prev().find('img').addClass('previmg');
        $('li.active').next().find('img').addClass('nextimg');
   });

通过这种方式，您可以使用新的图像类来识别 jquery 点击

或者试试这个

   $(document).ready(function () {
        $('li.active').prev().find('img').css({
                                    background-color: 'red', 
                                    height : '300px'
        });
        $('li.active').next().find('img').css({
                                    background-color: 'red', 
                                    height : '300px'
        });
   });

或者你可以用很长的路

   $(document).ready(function () {
        $('li.active').prev().children('a').children('img').css({
                                          background-color: 'red', 
                                          height : '300px'
        });
        $('li.active').next().children('a').children('img').css({
                                          background-color: 'red', 
                                          height : '300px'
        });
   });
于 2013-09-09T19:37:25.817 回答
0

您可以使用 jQuery 的.addClass();函数向 previous 和 next lis 添加一个类，然后使用 CSS 设置其中的图像样式。

见http://jsfiddle.net/TFQ3K/3/

于 2013-09-09T19:20:15.553 回答
0

添加 .find(img) ，它会在 li.active 中找到 img，类似于：

$('li.active').find(img).whatever...
于 2013-09-09T19:08:23.283 回答