Как найти правильное изображение с помощью индекса 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 div. Например, если бы я нажал на

 <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

Сделал ответ так, чтобы он соответствовал вашим последним комментариям:

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

Answer 3

Попробуйте что-то вроде этого, который сопоставит изображения в #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().