jQuery将类添加到其他元素时删除类

Question

我在一行中有 6 张图片，第一个在页面加载时应用了一个类，该类使用 CSS3 应用 Web 转换。当其他图像悬停在同一类上时，将应用于这些图像，然后在 mouseout 时将其删除。我需要实现的最后一件事是，当其他图像悬停在第一个图像上时，将删除类，如果没有图像悬停在第一个图像上，则再次应用其类。

这是我目前所拥有的：

$(document).ready(function() {
    $("#imagePackshot li img").hover(function(){
        $(this).addClass('packshot').siblings().removeClass('packshot');
    },
    function () {
        $(this).removeClass('packshot');
    })
    .first().addClass('packshot');
});

Answer 1

您需要在删除一个类后检查是否没有其他具有“packshot”类的图像，在这种情况下将其添加到第一个。

 $(document).ready(function() {
        var activeClass = 'packshot', images = $("#gallerySlideshow li img");
        var first = images.first().addClass(activeClass);
        images.hover(function(){
            // remove the class from all images who still have it, most likely only one.
            images.filter("."+activeClass).removeClass(activeClass); 
            // add class to the element that was hovered.
            $(this).addClass(activeClass);
        },
        function () {
            // remove class from the image that was hovered out of
            $(this).removeClass(activeClass);
            // if no other images have the active class, then give it to the first image
            if(!images.filter("."+activeClass).size()){
               first.addClass(activeClass);
            }
        })
  });

编辑：

代码使用此 html 结构，基于您发布的链接，这意味着您不能使用“兄弟姐妹”来引用下一个图像，因为图像不是 html 树中的兄弟姐妹：

<ul id="gallerySlideshow">
    <li>
        <a href="page9.html"><img src="thumbnails/thumb9.jpg" width="158" height="236" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box2" src="thumbnails/thumb1.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box" src="thumbnails/thumb3.jpg"  /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>



    <li>
        <a href="page9.html"><img class="box1" src="thumbnails/thumb4.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box3" src="thumbnails/thumb5.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>

    <li>
        <a href="page9.html"><img class="box4" src="thumbnails/thumb6.jpg" /></a>
        <ul id="noimg">
            <li>
                <a href=""><img src="Images/more-like-this.png" /></a>
            </li>
        </ul>
    </li>
</ul>