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

好的，所以在我看来你只是采取了错误的做法。

以下是快速解决方法：

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

Answer 3

您好尝试使用bind an not on

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

希望这能帮到你

.each（）jQuery并点击

3 个答案: