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>

Answer 2

querySelector（）方法返回与文档中指定的CSS选择器匹配的第一个元素。

尝试 var elements = document.getElementsByClassName(names) 获取具有相同类名的所有元素。或者，尝试var element = document.getElementById(id)进行更精细的选择。

有没有办法在JS中同时更改少量图像的src？

2 个答案: