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

Question

我有一个行中的6个图像，第一个时，页面加载有一个类应用于它使用CSS3应用web转换。当其他图像在同一类上进行悬停时，将应用于这些内容，然后在鼠标悬停时将其移除。我需要做的最后一件事是，当其他图像悬浮在第一个图像上时，类将被删除，如果没有图像悬浮在第一个图像上，它的类会再次应用到它。

这是我到目前为止有：

$(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); 
      } 
     }) 
    }); 

编辑：

使用这个网站的结构，根据您发布的链接，这意味着你不能用“兄弟姐妹”是指接下来的图像上，由于图象AREN代码”在HTML树T兄弟姐妹：

<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>