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

Question

Fiddle Demo

在演示中，如果你徘徊在拇指上，大图像将会褪色并改变它的工作方式，但我的问题是，我希望在一个页面中有超过1个条目，我不知道何时添加另一个，第二个其余部分将被打破。

Fiddle Demo

即使我使用class

，有人可以解释为什么会出现此问题

JS

$(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();
    });
});

Answer 1

您需要遍历每个上下文（我使用.big-image）并每次使用该上下文应用您的代码：

• 使用each()
循环播放
• 使用find()
遍历大图像
• 使用next()和find()
遍历您的缩略图
• 将上下文存储在变量中，以便在事件处理程序中引用它。

$(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()
        });
    });
});

请注意，这假设.small-images始终是.big-image的直接兄弟

JSFiddle