2

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

我已经让它工作了，但只有画廊中有已知数量的图像（在本例中为 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 中检测它），以便该脚本适用于任何大小的任何画廊。

提前感谢您的帮助。

相关HTML：

<div id="main-slideshow">
    <img class="1 show" src="images/booklet-open.jpg"/>
    <img class="2 hide" src="images/booklets.jpg" />
    <img class="3 hide" src="images/poster-1.jpg" />
</div>

<div id="slideshow-thumbs">
    <img class="1 active" src="images/booklet-open-thumb.jpg" />
    <img class="2 inactive" src="images/booklets-thumb.jpg" />
    <img class="3 inactive" src="images/poster-1-thumb.jpg" />
</div>

相关CSS：

.inactive {
    opacity:0.5;
}

.active {
    opacity: 1;
}

.hide {
    display:none;
}

.show {
    display:block;
}
4

2 回答 2

1

你很接近，只需要使用变量 n，而不是字符串。我还结合了最后两个语句，因为您不需要重新获取元素。正如 Danny 指出的那样，您可以通过以下方式找到 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');
    });
}

但是，这种解决方案容易受到循环问题的影响。本质上，由于该部分代码位于闭包中，因此n即使在for循环继续进行后，它也会保留对变量的引用。因此，当单击 img 时，它会查找最大 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');
}
于 2013-01-16T20:28:20.200 回答
0

你不需要这么多的类和 for 循环。看看这个演示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()方法通过这个索引给出图像。

于 2013-01-16T20:43:01.290 回答