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

我想更改“汽车图像”类中所有图像的src。

但我不必改变整个url。我只想更改一个字符

我想编辑这个-

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

这是行不通的。

---

如何在javascript中执行此操作？

您设置了错误节点的src allsrc返回您的div而不是图像

试试这个

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

---

您正在设置错误节点的src allsrc返回您的div而不是映像

试试这个

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

使用（jQuery解决方案）：

$（“img:nth-child（1）”）.attr（'src'，）

n个子（i）
表示
i
th图像

例如：

$（“.car\u image img:nth child（1）”）.attr（'src'，'/cars/3\u large\u 2.png'）

要更改所有图像，只需删除
：nth-child（）
使用（jQuery解决方案）：
$（“img:nth-child（1）”）.attr（'src'，）

n个子（i）
表示
i
th图像

例如：

$（“.car\u image img:nth child（1）”）.attr（'src'，'/cars/3\u large\u 2.png'）

要更改所有图像，只要删除
：n-child（）
，如果可以的话

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

如果你能做到的话

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

这个怎么样

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

这个怎么样

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

我想更改中所有图像的src
使用javascript的“汽车图像”类

您可以为所有
汽车图像
类更改
，如下所示：


var all=document.getElementsByClassName（'car-image'）；
对于（变量i=0；i



我想更改中所有图像的src
使用javascript的“汽车图像”类

您可以为所有
汽车图像
类更改
，如下所示：


var all=document.getElementsByClassName（'car-image'）；
对于（变量i=0；i

更优雅的解决方案是使用regex替换函数。如果您知道image src模式以及适用于所有image src的类似更改，那么可以构建一个正则表达式。在这种情况下，您可以迭代包含
car image
类的元素，找出第一个子节点并更改src attr，而不是逐个更改每个图像src

// 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]);

//查找包含类car image的所有元素
var carImgDivs=document.getElementsByClassName（'car-image'）；
//迭代carImgDivs并执行imediate函数以只传递
//childNode1这就是图像。使用带有regex的replace函数查找
//更改图像src值并将更改的src值设置为childNode1
对于（var i=0；i

对于像
/cars/3\u large\u 1.png这样的图像src，正则表达式（41;）（\ d）匹配数字后面的下划线，并捕获这两个数字。替换字符串
“$12”
中的
$1
表示保持第一个捕获组（下划线）不变，
2
表示将第二个捕获组（一个数字）替换为
2
。基本上，正则表达式与上图src中的
\u1
匹配
\uu
是第一个捕获组，
1
是第二个捕获组。因此，最后，图像src变为
/cars/3_large_2.png
更优雅的解决方案是使用regex替换函数。如果您知道image src模式以及适用于所有image src的类似更改，那么可以构建一个正则表达式。在这种情况下，您可以迭代包含
car image
类的元素，找出第一个子节点并更改src attr，而不是逐个更改每个图像src

// 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]);

//查找包含类car image的所有元素
var carImgDivs=document.getElementsByClassName（'car-image'）；
//迭代carImgDivs并执行imediate函数以只传递
//childNode1这就是图像。使用带有regex的replace函数查找
//更改图像src值并将更改的src值设置为childNode1
对于（var i=0；i

对于像
/cars/3\u large\u 1.png这样的图像src，正则表达式（41;）（\ d）匹配数字后面的下划线，并捕获这两个数字。替换字符串
“$12”
中的
$1
表示保持第一个捕获组（下划线）不变，
2
表示将第二个捕获组（一个数字）替换为
2
。基本上，正则表达式与上图src中的
\u1
匹配
\uu
是第一个捕获组，
1
是第二个捕获组。因此，最后，图像src被更改为
/cars/3\u large\u 2.png
为了澄清，您希望
.car image
中的每个图像都具有相同的源代码吗？或者你想在整个课程中迭代并增加源代码中的最后一个数字？请查看我的答案，我已经根据你的需要进行了更新。感谢澄清，您希望
.car image
中的每个图像都有相同的来源吗？或者你想在整个课程中迭代并增加源代码中的最后一个数字？请查看我的答案，我已经根据你的需要进行了更新。谢谢，这和我的答案是一样的。这和我的答案是一样的。确切地说，我的代码是-