如何在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="T-shirt" class="items" id="imgChange">
</div>
<div class="item">
  <img src="img/hoodie.jpg" alt="Hoodie" class="items">
</div>
<div class="item">
  <img src="img/pants.jpg" alt="Pants" class="items">
</div>

接下来核心是实现changeImage()函数，思路很简单：一次性选中所有目标图片，遍历它们逐个修改src。下面给你两种实用的实现方式：

方法1：使用document.querySelectorAll()（推荐） #

这个方法能精准选中所有匹配的元素，是批量操作DOM的首选：

function changeImage() {
  // 选中所有class为items的图片
  const targetImages = document.querySelectorAll('.items');
  
  // 遍历每张图片，修改src属性
  targetImages.forEach(img => {
    // 这里可以根据图片的特征设置不同的新路径，举两个例子：
    // 例子1：根据图片的alt属性动态生成鞋子相关路径
    img.src = `img/shoes-${img.alt.toLowerCase()}.jpg`;
    // 例子2：按索引顺序设置不同的鞋子图片（比如shoes-1.jpg、shoes-2.jpg）
    // img.src = `img/shoes-${Array.from(targetImages).indexOf(img)+1}.jpg`;
  });
}

方法2：使用document.getElementsByClassName() #

如果需要兼容非常老旧的浏览器（现在基本用不上了，但还是给你做个补充）：

function changeImage() {
  // 获取所有class为items的图片（返回HTMLCollection）
  const targetImages = document.getElementsByClassName('items');
  // 转成数组后再遍历修改
  Array.from(targetImages).forEach(img => {
    img.src = 'img/your-shoe-image.jpg'; // 替换成你的目标图片路径
  });
}

额外小建议 #

• 尽量避免在HTML里写内联onclick，如果项目允许的话，推荐用事件监听绑定，代码结构更清晰：

  // 先移除HTML里的onclick属性，再用JS绑定事件
  document.querySelector('.items-list li:first-child a').addEventListener('click', changeImage);
  

• 一定要确保新的图片路径是正确的，否则会显示加载失败的占位符哦~

内容的提问来源于stack exchange，提问作者B.Mat