Question

我正在尝试使用jQuery生成我自己的图库，其中包含一些可点击的缩略图，可在单击相应的缩略图时显示/隐藏大图像。

我已经开始工作但只有图库中已知数量的图像（在本例中为3）。如果我在图库中有30张图片怎么办？我不想写下30次以下的代码！

我真正想要的是更改此代码......

$('#slideshow-thumbs img.1').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.1').removeClass('hide');
    $('#main-slideshow img.1').addClass('show');
});

$('#slideshow-thumbs img.2').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.2').removeClass('hide');
    $('#main-slideshow img.2').addClass('show');
});

$('#slideshow-thumbs img.3').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.3').removeClass('hide');
    $('#main-slideshow img.3').addClass('show');
});

...更像这样的格式（其中n是数字，j是图库中图像的总数）：

for (n=1; n<=j; n++) {

$('#slideshow-thumbs img.n').click( function() {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.n').removeClass('hide');
    $('#main-slideshow img.n').addClass('show');
});

}

但我不知道如何在jQuery中正确编写这个，因为我是新手。非常感谢一些帮助！我还希望脚本能够计算j（图库中的图像总数）（通过从我假设的html中检测到它），这样脚本就适用于任何大小的任何图库。

提前感谢您的帮助。

相关CSS：

.inactive {
    opacity:0.5;
}

.active {
    opacity: 1;
}

.hide {
    display:none;
}

.show {
    display:block;
}

Answer 1

你很接近，只需要使用变量n，而不是字符串。我还结合了最后两个语句，因为您不需要重新获取元素。正如丹尼指出的那样，你可以通过以下方式找到j。

尝试1（错误）：

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        $('#main-slideshow img.show').removeClass('show').addClass('hide');
        $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
    });
}

但是，此解决方案容易受到looping problem的影响。本质上，由于代码的这一部分位于闭包中，因此即使在n循环开始后，它仍保留对for变量的引用。因此，当单击img时，它会查找max n值（在本例中为4），并且没有任何反应。要避免它，请尝试将n的值放在对象中（在本例中为函数）。有很多解决方案，随时可以试验。

尝试2（正确）：

var j = $('#slideshow-thumbs img').size()

for (n=1; n<=j; n++) {
    $('#slideshow-thumbs img.' + n).click( function() {
        toggleImages(n);
    });
}

function toggleImages(n) {
    $('#main-slideshow img.show').removeClass('show').addClass('hide');
    $('#main-slideshow img.' + n).removeClass('hide').addClass('show');
}

Answer 2

你不需要这么多的类和循环。看看这个演示http://jsfiddle.net/eaTjM/1/

$("#slideshow-thumbs img").click(function(){
  $(this).addClass("active").siblings().removeClass("active");
  $("#main-slideshow img").eq($(this).prevAll().length)
    .addClass("show").siblings().removeClass("show")
});

$(this).prevAll().length为我们提供了点击预览索引，.eq()方法通过此索引提供了图片。

在可变长度的序列中使用jQuery addClass

2 个答案: