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; div中的图片展示（给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();
    });
});

Answer 2

尝试类似这样的内容，将#images中的图片与类zoomImage相匹配，并尝试在#images2和.show()中找到具有相同编号的图片。

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

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

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

如果您希望能够通过后续点击关闭图片，请使用.toggle()代替.show()。

Answer 3

做出回应，使其符合您的最新评论：

HTML：

<div id="images">
    <img src="but1.jpg" alt="1" />
    <img src="but2.jpg" alt="2" />
    <img src="but3.jpg" alt="3" />
    <img src="but4.jpg" class="zoomImage" alt="4" />
    <img src="but5.jpg" class="zoomImage" alt="5" />
    <img src="but6.jpg" alt="6" />
</div>

<div id="images2">
    <img src="butB4.jpg" alt="B4" />
    <img src="butB5.jpg" alt="B5" />
</div>

CSS：

#images2 > img {
    display: none;
}

JavaScript的：

$(document).ready(function() {

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

jsFiddle

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

3 个答案: