.each（）jQuery和点击

我想让图像可见，如果点击索引的缩略图匹配隐藏图像的索引。我不确定我是否在正确的轨道上。我的代码的第一部分，添加一个类'lght-box'加上它的索引正在工作。第二部分我遇到了麻烦。.each（）jQuery和点击

在此先感谢。

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>

来源

2014-01-05 AaronHappe

在你的代码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'); 
});

来源

2014-01-05 21:01:03 undefined

这个工作，帮助我对这个问题的理解。谢谢。 – AaronHappe

@AaronHappe很好，欢迎您。 – undefined

-1

喜试的不是

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

希望这有助于你

来源

2014-01-05 20:58:08 archetipo

好的，所以在我看来，你只是跟随错误的方法。

这里是速战速决：

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'); 
      } 
     }) 
    });

来源

2014-01-05 21:18:49

.each（）jQuery和点击

回答

相关问题