javascript - 有没有办法在 JS 中一次更改几个图像的 src？

Question

我做了一些研究，关于在 JavaScript 中更改图像的 src 有很多问题。但是，我想在一次单击按钮时更改三个图像的 src。

HTML:

<ul class="items-list">
 <li><a href="#!" onclick="changeImage()">Shoes</a></li>
 <li><a href="#">T-shirts</a></li>
</ul>
<div class="item"><img src="img/t-shirt.jpg" alt="" class="items" id="imgChange">
<div class="item"><img src="img/hoodie.jpg" alt="" class="items">

JavaScript:

function changeImage(){
let change = document.querySelector('#imgChange').src="img/shoe.png";}

所以这段代码工作得很好，但它只改变了一张图片。我想一次更改 2 个或更多图像。我试图按类获取元素，但它仍然只改变第一张图片。所以在这种情况下，我也想更改第二个 div 中的图像。提前致谢!

Answer 1

document.querySelector 仅选择第一个元素，document.querySelector('#imgChange') 将选择具有 id 的第一个元素.使用 document.querySelectorAll('img') 它将选择所有 img 标签。使用 forEach 迭代循环并更改 src

function changeImage() {
  let change = document.querySelectorAll('img').forEach(function(item) {
    item.src = "img/shoe.png";
  })
}

<ul class="items-list">
  <li><a href="#!" onclick="changeImage()">Shoes</a></li>
  <li><a href="#">T-shirts</a></li>
</ul>
<div class="item">
  <img src="img/t-shirt.jpg" alt="" class="items" id="imgChange">
</div>
<div class="item">
  <img src="img/hoodie.jpg" alt="" class="items">
</div>