JQuery несколько элементов класса, управляемых определенными кнопками

Question

Это трудный вопрос к слову, я даже не знаю, с чего начать объяснение, однако я подберу код для вас

Это работает

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

Jquery

$('.btn').click(function (){
    $('.myImage').attr('src', $(this).attr('src'));
});

А что если у меня есть несколько изображений

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

<div>
    <div>
        <img src='' class='myImage'/>
    </div>
    <div>
        <button class='btn' src='hello.png'>Hello</button>
        <button class='btn' src='hi.png'>Hi</button>
    </div>
</div>

Идентификатор не может работать здесь, потому что div рисуется с использованием динамической базы данных и PHP. Есть ли способ получить событие btn, по которому щелкают, чтобы изменить только источник его родителей myImage

Answer 1

$('.btn').click(function (){
  var btn = $(this);
  btn.parent().prev().children().attr('src', btn.attr('src'));
});

Таким образом, вы попадаете в родительский div, затем в предыдущий div (их два) и, наконец, в потомок этого предыдущего div.

Answer 2

Я бы использовал другой селектор, чтобы убедиться, что вы получите правильный img.myImage.

Возможно, это будет работать:

$('.btn').click(function (e){
    var $this = $(this); //small performance gain
    $this.closest('img.myImage').attr('src', $this.attr('src'));
});

Стоит отметить, что .closest доступно только вjQuery 1.3 или выше.

Answer 3

Я бы использовал index () и eq .Если у вас есть один .myImage для каждого .btn, изображение 3 относится к кнопке 3, изображение 666 относится к кнопке 666 и т. Д.

$('.btn').click(function (){
    var id = $('.btn').index(this);
    $('.myImage').eq(id).attr('src', $(this).attr('src'));
});

Answer 4

Самый прямой способ - использовать метод JQuery parent(), для которого вы можете найти документацию здесь . Если бы ваша HTML-структура была постоянной, вы могли бы просто подойти к двум элементам, подобным этому:

$('.btn').click(function() {
    $(this).parent().prev().children('img').attr('src', $(this).attr('src'));
}); 

.. или, если вы хотите что-то более динамичное, вы можете поместить имя класса или ID в каждый родительский div и использовать вариант parent(selector) в документации.