Jquery 在一个页面中添加两个或多个带有缩略图的大型图像

在演示中，如果你将鼠标悬停在拇指上，大图像将褪色，并改变它的工作方式，正如我所预期的那样，但我的问题是，我希望在一个页面中有不止一个这样的条目，我不知道当我添加另一组时，第二组和其余部分将被破坏

即使我使用

class

JS

---

您需要循环遍历每个上下文（我使用了

.big image

），并使用该上下文每次应用代码：

• 使用

  each（）循环

• 使用

  find（）

• 使用

  next（）

  和

  find（）

• 将上下文存储在变量中，以便可以在事件处理程序中引用它

注意，这假设

。小图像

始终是

。大图像

的直接兄弟

$(function(){
    $(".big-image img:eq(0)").nextAll().hide();
    $(".small-images img").hover(function(e){
        var index = $(this).index();
        $(".big-image img").eq(index).show().siblings().hide();
    });
});

$(function(){
    $(".big-image").each(function(){
        var $big = $(this);
        $big.find('img').nextAll().hide();
        $big.next('.small-images').find('img').hover(function(e){
            var index = $(this).index();
            $big.find('img').eq(index).show().siblings().hide()
        });
    });
});