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

Question

我想做一个javascript代码来改变图像。我的意思是有两个图像和一个按钮。镜像路径为/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。但是有可能改变包含changeimgid的所有图像的路径吗?有这样的代码片段吗?

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";
}