Question

我有几个带有“图像”类的div和几个带有“缩略图”类的div（两者都可以根据用户添加的数量而变化，但总是使用图像生成缩略图，并且总是以相同的顺序，因此第一个拇指来自第一个图像）我已经隐藏了所有的拇指div，但第一个已经使用了：

  $('.image:not(:first)').hide();

我想迭代缩略图类并让它显示第二张图像并隐藏其他图像，如果我点击第二张拇指，第三张图像，如果我点击第三张拇指等等。

我将如何在jQuery中执行此操作？

Answer 1

你必须创造一些将两者联系在一起的方法。在这个例子中，我使用了元素的索引。然后，您可以使用CSS类切换显示状态。

http://jsfiddle.net/ZCuYM/1/

$('.thumb').click( function() {
    //switch active thumb
    $('.thumb.active').removeClass('active');
    $(this).addClass('active');

    //switch active image
    $('.image.active').removeClass('active');
    $('.image').eq($(this).index()).addClass('active');
});

Answer 2

如果你想点击第二个拇指并显示第二个图像而隐藏其他图像，下面的代码应该这样做：

<div class="image"></div>
<div class="thumb"></div>
<div class="image"></div>
<div class="thumb"></div>

$('.thumb').click(function() {
   $('.image').hide();
   $(this).prev('.image').show();
});

在这种情况下，当您单击.thumb时，将隐藏所有.image元素，并显示当前单击的.thumb之前的.image。如果您实时添加元素，可以考虑使用 .on（）进行点击事件

迭代通过类来隐藏/显示

2 个答案: