Dynamically changing source of image - jQuery

Question

I got the following code:

HTML

<div class="image">
    <img src="http://ecx.images-amazon.com/images/I/41ghiuvjdvL._SL75_SS50_.jpg" />
</div>

<br />

<div class="photo">
    <img src="http://profile.ak.fbcdn.net/hprofile-ak-ash2/27520_119569768054263_2432_q.jpg" />
</div>

JS

// getting src of bottom image
var bottomSrc = $(".photo img").find("src");

// getting src of top image
var topSrc = $(".image img").find("src");

$(".photo").click(function() {
    // changing sources
    // topSrc.attr("src", bottomSrc);
    // topSrc.replaceWith(bottomSrc);
    topSrc.replace(bottomSrc);
})

Fiddle

When the bottom image is clicked, I want the src of the top image to be replaced with the bottom image's src, so that both images are the same.

Why does the supplied code does not work?

you want to use .attr('src') to get the value of the src attribute, not .find() which finds child elements — MrOBrian
– MrOBrian, Commented Jul 24, 2012 at 23:53

Tim Withers · Accepted Answer · 2012-07-24 23:54:10Z

4

Try this out:

$(".photo").click(function() {
    var src=$(this).children("img").attr("src");
    $(".image img").attr("src",src);
});

answered Jul 24, 2012 at 23:54

Tim Withers

12.1k5 gold badges45 silver badges68 bronze badges

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

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Try this

You need to get and set the src attribute, using attr() function in jQuery

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 24, 2012 at 23:55

jose

2,5315 gold badges38 silver badges53 bronze badges

Collectives™ on Stack Overflow

Dynamically changing source of image - jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related