Question

Its a hard question to word i dont even know where to start explaining, however il right the code for you

This works

<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'));
});

Now what if i have multiple images

<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>

Id cant work here, cause the divs are drawn using dynamic database and PHP. Is there a way i can get the btn event that is clicked to only change the source of its parents myImage

Answer 1

I’d use a different selector to ensure you get the correct img.myImage.

Probably this will work:

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

Worth noting that .closest is only available in jQuery 1.3 or greater.