使用javascript仅更改类的所有img src中的一个字符

Question

I want to change the src of all the images which are in the 'car-image' class.

But I do not have to change whole url. I just want to change one character .

I want edit this -

<div class="car-image">
    <img src="/cars/3_large_1.png">
</div>

To this-

<div class="car-image">
    <img src="/cars/3_large_2.png">
</div>

And this format is common in all the image in this class. I tried something like this-

var allsrc = document.getElementsByClassName('car-image');
allsrc[0].src="/cars/3_large_2.png";

This is not working. How can i do this in javascript?

Answer 1

you are setting src of wrong node allsrc returns your div not the image.

Try this

allsrc[0].childNodes[1].setAttribute("src","/cars/3_large_2.png")

Answer 2

I want to change the src of all the images which are in the 'car-image' class using javascript.

You can change <img> src for all car-image classes like this:

 var all = document.getElementsByClassName('car-image'); for(var i = 0; i < all.length; i++){ var image = document.getElementsByClassName('car-image')[i].getElementsByTagName('img'); image[0].setAttribute("src", "/cars/3_large_2.png"); } 

 <div class="car-image"> <img src="/cars/3_large_1.png"> </div> <div class="car-image"> <img src="/cars/5_large_1.png"> </div> <div class="car-image"> <img src="/cars/7_large_1.png"> </div> <div class="car-image"> <img src="/cars/9_large_1.png"> </div> 

(Inspect elements and see new src's)

Answer 3

A more elegant solution would be to use replace function with regex. If you know the image src pattern and similar changes apply to all image src, you can build a regex. In that case, instead of changing each image src one by one, you can iterate over the elements that contains car-image class and find out the first childNode and change the src attr.

// find all elements that contains class car-image
var carImgDivs = document.getElementsByClassName('car-image');

// iterate over carImgDivs and execute an imediate function to just pass the
// childNode1 that is the image. Use replace function with regex to find out the
// changed image src value and set the changed src value to childNode1
for(var i = 0; i < carImgDivs.length; i++) (function(childNode1) {
  if(childNode1) { 
    var replacedSrc = childNode1.getAttribute('src').replace(/(_)(\d)/, "$12");
    childNode1.setAttribute("src", replacedSrc);
  }
})(carImgDivs[i].childNodes[1]);

For a image src like /cars/3_large_1.png , the regular expression (_)(\\d) matches a underscore that follows a digit and captures both. The $1 in replace string "$12" says to keep the first capture group(underscore) as it is and 2 says to replace the second capture group(a digit) with 2 . Basically, the regex matches with _1 in the above image src. _ is the first capture group and 1 is the second capture group. So, in the end, the image src gets changed to /cars/3_large_2.png

Answer 4

Use(jQuery solution) : $( "img:nth-child(1)" ).attr('src', <new_name>);

The nth-child(i) means i th image.

Example:

$(".car_image img:nth-child(1)").attr('src', '/cars/3_large_2.png');

To change all the images just remove the :nth-child()

Answer 5

如果您在页面中包含jQuery，则可以执行

$(".car-image img").attr("src", "/cars/3_large_2.png");

Answer 6

What about this

var x = document.getElementsByClassName('car-image')[0]; 
var img = x.getElementsByTagName('img')[0];
img.src = "/cars/3_large_2.png";