JavaScript 更改具有相同 ID 的图像路径

Question

我想制作一个更改图像的 JavaSript 代码。我的意思是有两个图像和一个按钮。图片路径为/assets/images/svg/outline-img1.svg 和/assets/images/svg/outline-img.svg。还有一个按钮，它应该更改所有具有相同 id (id="changeimg") 的图像路径。 我想当您单击按钮时，它应该更改包含changeid 的图像。这很简单，但我真正想要的只是改变路径的一部分。我的意思是我想将路径从/assets/images/svg/outline-img1.svg 更改为/assets/images/svg/filled-img.svg。但是是否可以更改所有包含changeimg id 的图像路径？ 有没有代码sn-p 比如这个？

document.querySelector('.btn').addEventListener("click", 
function () {
  $('#changeimg').attr('src', '/assets/images/svg/filled-'+imgname+'.svg');
/*
imgname should be the name of the image between the '/assets/images/svg/outline' and the '-.svg'. (In this example imgname = shape and imgname = shape2)
So the it should change the elements that contains the '#changeimg' id from '/assets/images/svg/outline-shape.svg' to '/assets/images/svg/filled-shape.svg'
And all the images with the changeimg id should be changed.
*/
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="/assets/images/svg/outline-shape.svg" id="changeimg">
<img src="/assets/images/svg/outline-shape2.svg" id="changeimg">

<button class="btn">Change</button>

我知道这有点难以理解，如果你愿意，我可以重新定义我的问题。

Answer 1

首先，ID 应该是唯一的。如果不这样做，您甚至可能会收到警告。 使用类，然后

const elements = document.getElementByClassName('changeimg')
for (let i=0; i< elements.length; i ++) {
   const imgPath = elements[i].src;
   imgPath.replace('outlined', 'filled');
   elements[i].src = imgPath; 
}

Answer 2

试试这个，

 const x = document.querySelectorAll("#changeimg");
   for (i = 0; i < x.length; i++) {
    x[i].src = "/assets/images/svg/filled-img.svg";
   }