jquery - 如何使用 jquery 索引找到正确的图像

Question

我需要在 div 中找到特定图像并显示它。但问题是我点击了不同的图像。这是代码:

<div id="images">
<img src="but1.jpg" alt="" />
<img src="but2.jpg" alt="" />
<img src="but3.jpg" alt="" />
<img src="but4.jpg" class="zoomImage" alt="" />
<img src="but5.jpg" class="zoomImage" alt="" />
<img src="but6.jpg" alt="" />
</div>

<div id="images2" style="display:none;">
<img src="butB4.jpg" alt="" />
<img src="butB5.jpg" alt="" />
</div>

现在，如果我单击一些具有 zoomImage 类的图像，我想显示(给 display:block;) 中的图像>images2 分区。例如，如果我点击

 <img src="but4.jpg" class="zoomImage" alt="" />

它应该出现

<img src="butB4.jpg" alt="" />

如果我点击

<img src="but5.jpg" class="zoomImage" alt="" />

它应该出现

<img src="butB5.jpg" class="zoomImage" alt="" />

然后如果我点击

<img src="but6.jpg" alt="" />

什么都不应该发生。

Answer 1

试试这个

$('#images img.zoomImage').each(function(i) {
    $(this).data("index", i).click(function(){
         $('#images2').show().find("img").hide().eq($(this).data("index")).show();
    });
});