jQuery multiple class elements controlled by specific buttons

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

Actually you won't change the sourse of its parents. The image is in the same level as btn. The parents is just divs. — SPL_Splinter
– SPL_Splinter, Commented Apr 4, 2011 at 3:59

Alex Mcp · Accepted Answer · 2011-04-04 03:55:04Z

2

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.

answered Apr 4, 2011 at 3:55

Alex Mcp

19.4k12 gold badges62 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damb · Accepted Answer · 2011-04-04 03:56:54Z

2

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

This way you get to parent div, then to previous div (there are two) and finally to child of that previous div.

answered Apr 4, 2011 at 3:56

Damb

14.7k6 gold badges50 silver badges49 bronze badges

Comments

KP Taylor · Accepted Answer · 2011-04-04 03:55:58Z

0

The most direct way would be to use the JQuery parent() method, for which you can find documentation here. If your HTML structure was constant, you could just walk up two elements like this:

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

..or, if you wanted something more dynamic, you could put a class name or ID on each parent div and use the parent(selector) variation in the documentation.

answered Apr 4, 2011 at 3:55

KP Taylor

2,1001 gold badge17 silver badges15 bronze badges

2 Comments

SPL_Splinter Over a year ago

The parent in any level of .btn is not an image so this code will not work.

KP Taylor Over a year ago

@SPL_Splinter: Thanks, it was an oversight from typing fast; it's corrected.

SPL_Splinter · Accepted Answer · 2011-04-04 04:07:24Z

0

I would use index() and eq. If you have one .myImage for each .btn the image 3 is relative to button 3, the image 666 is relative to button 666 and so on.

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

answered Apr 4, 2011 at 4:07

SPL_Splinter

5031 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

jQuery multiple class elements controlled by specific buttons

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related