Question

 <div>
     <a id="_a-link" href=""><img src="/local/img/image1.png" alt=""/></a>
 </div>

For that image link, I try the following jquery code to change its image source attribute into

 <div>
     <a id="_a-link" href=""><img src="/local/img/image2.png" alt=""/></a>
 </div>


$('#_a-link img').attr('src','');
$('#_a-link img').attr('src','/local/img/image2.png');

However the image displayed after all still is the same; it is image1.png not image2.png;

Answer 1

You have a typo:

$('#_a-link img').attr('src','');
$('#_a-link img').attr({'src':'/local/img/image2.png', 'alt': ''});

Also you’re doing it wrong with selectors. AFAIK, “#ID TAGNAME” selectors work pretty long. They will get all the img’s and then will walk upstairs the DOM for each one to find some node with ID. You better add some class to needed images or if it’s expected to be single use image id.

So the best optimized way is:

<a whatever here><img src="#" class="imgClass" /></a>
$(".imgClass");