如何在JS中存储图片及src链接为变量实现图片选择器

核心思路 #

你的需求本质是交换主图和被点击小图的图片地址，图片的src属性是字符串，完全可以像普通文本一样存储、比较和赋值，不用纠结能不能存的问题。

实现代码示例 #

假设你的HTML结构如下（和你已完成的结构匹配即可）：

<div class="main-image-container">
  <img class="main-image" src="main.jpg" alt="主图">
</div>
<div class="thumbnails-container">
  <img class="thumbnail" src="thumb1.jpg" alt="缩略图1">
  <img class="thumbnail" src="thumb2.jpg" alt="缩略图2">
  <img class="thumbnail" src="thumb3.jpg" alt="缩略图3">
</div>

对应的JS代码：

// 等页面DOM加载完成再执行代码，避免找不到元素
document.addEventListener("DOMContentLoaded", function() {
  // 获取主图元素：getElementsByClassName返回集合，取第一个匹配项
  const mainImage = document.getElementsByClassName("main-image")[0];
  // 获取所有小图元素
  const thumbnails = document.getElementsByClassName("thumbnail");

  // 给每个小图绑定点击事件
  for (let i = 0; i < thumbnails.length; i++) {
    thumbnails[i].addEventListener("click", function() {
      // 临时存储主图的地址
      const tempMainSrc = mainImage.src;
      // 把被点击小图的地址赋值给主图
      mainImage.src = this.src;
      // 把原来主图的地址赋值给被点击的小图
      this.src = tempMainSrc;
    });
  }
});

关键知识点解释 #

1. 元素获取：document.getElementsByClassName()返回的是元素集合（HTMLCollection），所以必须通过[0]取第一个匹配元素（也就是你的主图）。
2. src属性的本质：图片的src是字符串类型，直接用变量就能存储，比如const tempMainSrc = mainImage.src就是把主图地址存在变量里。
3. 点击事件中的this：this在点击事件里指代当前被点击的小图元素，用this.src就能直接拿到它的图片地址。
4. 交换逻辑：用临时变量存主图地址，再分别赋值，就完成了两者的交换，完全满足你的三个功能逻辑。

新手注意事项 #

• 一定要把JS代码放在页面底部，或者用DOMContentLoaded包裹，否则页面还没渲染完，JS就会找不到元素。
• 如果需要禁止重复点击同一小图，可以加判断：

  if (mainImage.src !== this.src) {
    // 交换代码放这里
  }
  

内容的提问来源于stack exchange，提问作者TiredOfBeingBroke