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>