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

我需要在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>

它应该会出现

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

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

如果我点击

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

它应该会出现

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

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

然后如果我点击

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

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

---

不应该发生任何事情。

尝试类似的操作，将

#images

中的图像与类

zoomImage

相匹配，并尝试在

#images2

和

中查找具有相同编号的图像

$('#images img.zoomImage').click(function() {
    var imageNo = $(this).attr('src').replace(/^.*(\d+)\.jpg$/, '$1');
    $('#images2 img[src="butB' + imageNo + '.jpg"').show();
});

如果，正如您在评论中所建议的，图像编号不一致。但是图像显示在
#images2
DIV中的顺序与使用
的图像相同。zoomImage
类显示在上面的
#images
DIV中，然后您可以使用以下代码

$('#images img.zoomImage').click(function() {
    var imageNo = $('#images img.zoomImage').index(this);
    $('#images2 img:eq(' + imageNo + ')').show();
});

如果希望能够通过后续单击关闭图像，请使用
.toggle（）
而不是
.show（）
尝试类似的操作，将
#images
中的图像与类
zoomImage
匹配，并尝试在
#images2
和
.show（）中查找具有相同编号的图像
it

$('#images img.zoomImage').click(function() {
    var imageNo = $(this).attr('src').replace(/^.*(\d+)\.jpg$/, '$1');
    $('#images2 img[src="butB' + imageNo + '.jpg"').show();
});

如果，正如您在评论中所建议的，图像编号不一致。但是图像显示在
#images2
DIV中的顺序与使用
的图像相同。zoomImage
类显示在上面的
#images
DIV中，然后您可以使用以下代码

$('#images img.zoomImage').click(function() {
    var imageNo = $('#images img.zoomImage').index(this);
    $('#images2 img:eq(' + imageNo + ')').show();
});

如果希望能够通过后续单击关闭图像，请使用
.toggle（）
而不是
.show（）
尝试此操作

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

试试这个

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

做出响应，以便与您的最新评论相对应：

HTML:

JavaScript:

$(document).ready(function() {

    $('#images > img.zoomImage').each(function(index) {
        var imageNumber = (index + 1);
        $(this).click(function() {
            $('#images2 > img:nth-child(' + imageNumber + ')').show();
        });
    });
});

作出响应，以便与您的最新评论相对应：

HTML:

JavaScript:

$(document).ready(function() {

    $('#images > img.zoomImage').each(function(index) {
        var imageNumber = (index + 1);
        $(this).click(function() {
            $('#images2 > img:nth-child(' + imageNumber + ')').show();
        });
    });
});

哦，对不起。我把所有的标记都复制到那里了。有些图像的名称中没有数字。我在想，我怎么能得到那个些有类ZoomImages的图像的索引号呢？然后用这个索引号把它挂在第二个div中？@marcovic：你的意思是，如果你有两个图像有
.zoomImage
类，那么你会期望
#images2
div中有两个图像？那很好。我将制作一个二级版本。是的，它们的顺序总是相同的（images div中的第一个图像在images2 div中的第一个较大的版本）。哦，对不起。我把所有的标记都复制到那里了。有些图像的名称中没有数字。我在想，我怎么能得到那个些有类ZoomImages的图像的索引号呢？然后用这个索引号把它挂在第二个div中？@marcovic：你的意思是，如果你有两个图像有
.zoomImage
类，那么你会期望
#images2
div中有两个图像？那很好。我将制作一个二级版本。是的，它们的顺序总是相同的（images div中的第一个图像在images2 div中有较大的版本）.@marcovic-请检查我是否根据我对您所寻找内容的理解编辑了我的答案。@marcovic-请检查我是否根据我对您所寻找内容的理解编辑了我的答案。