.each（）jQuery和點擊

Question

我想讓圖像可見，如果點擊索引的縮略圖匹配隱藏圖像的索引。我不確定我是否在正確的軌道上。我的代碼的第一部分，添加一個類'lght-box'加上它的索引正在工作。第二部分我遇到了麻煩。

在此先感謝。

var brigZoom = { 
    init : function() { 

     var ground = $('.ground-box'); 
     var lightBox = $('.lght-box img'); 

     lightBox.each(function(index) { 
      $(this).addClass('lght-box' + index); 
     }); 

     ground.hide(); 
     lightBox.css('visibility', 'hidden'); 

     var thumbImages = $('.thumbs img'); 

     thumbImages.each(function(index){ 
      $this = $(this); 
      $this.on('click', function(){ 
       lightBox[this.index].css('visibility', 'visible'); 
      }); 
     }); 

     } 
    }; 

brigZoom.init(); 

HTML：

<div class="ground-box"></div> 
<div class="lght-box"> 
    <img src="images/zoom/musings/small/1.jpg" class="images-that-need-zoom" alt="Honor & Beluga" /> 
    <img src="images/zoom/musings/small/2.jpg" class="images-that-need-zoom" alt="" /> 
    <img src="images/zoom/musings/small/3.jpg" class="images-that-need-zoom" alt="" /> 
    <img src="images/zoom/musings/small/4.jpg" class="images-that-need-zoom" alt="" /> 
    <img src="images/zoom/musings/small/5.jpg" class="images-that-need-zoom" alt="" /> 
</div> 

Answer 1

在你的代碼lightbox是一個jQuery對象，通過使用綁定方括號表示法，您將擁有一個沒有.css()方法的DOM元素對象。此外，DOM元素沒有index屬性，您正在傳遞undefined。

您可以使用.index()獲取索引的方法和.eq()使用另一個集合中的索引選擇元素的方法。

thumbImages.on('click', function(event) { 
    // Get the index 
    var i = thumbImages.index(this); 
    // Filter an element with the same index in another collection 
    lightBox.eq(i).css('visibility', 'visible'); 
}); 

Answer 2

喜試的不是

thumbImages.each(function(index){ 
     $this = $(this); 
     $this.bind('click', function(){ 
      lightBox[this.index].css('visibility', 'visible'); 
     }); 
    }); 

希望這有助於你

Answer 3

好的，所以在我看來，你只是跟隨錯誤的方法。

這裏是速戰速決：

lightBox.css('display', 'none'); 

    var thumbImages = $('.thumbs img'); 

    thumbImages.click(function(){ 
     var index = $(this).index(); 
     lightBox.each(function(i){ 
      if(i == index) 
      { 
       $(this).css('display', 'block'); 
      } 
      else 
      { 
       $(this).css('display', 'none'); 
      } 
     }) 
    });