点击为指定图片添加边框的JavaScript实现问题求助

首先咱们先梳理下你现有代码里的几个明显问题：

• 事件监听里的函数定义语法错误：function changeBorder后面缺了()，正确写法应该是function changeBorder() { ... }
• 你只给.vayne这一张图绑定了点击事件，其他图片（比如.nasus）完全没绑定，而且后续新增图片也没法自动获得这个交互
• 你的Border函数根本没有被调用，所以整个事件监听逻辑从一开始就没执行起来

接下来给你两种解决方案，优先推荐第二种，完美适配后续新增图片的需求：

方案1：给所有现有图片批量绑定事件 #

如果暂时不需要考虑后续动态新增图片，可以用这种方式，给所有图片一次性绑定点击事件：

<!DOCTYPE html>
<html>
<body>
  <div class="image-container">
    <img src="Champs/Vayne.png" class="champ-img">
    <img src="Champs/Nasus.png" class="champ-img">
  </div>

  <script>
    // 获取所有图片元素
    const allImages = document.querySelectorAll(".champ-img");
    
    // 给每张图绑定点击事件
    allImages.forEach(img => {
      img.addEventListener("click", function() {
        // 可选：点击新图时移除旧图的边框（实现单选效果）
        allImages.forEach(i => i.style.border = "none");
        // 给当前点击的图片添加边框
        this.style.border = "2px solid #000";
        // 如果要测试背景变红，替换成：this.style.backgroundColor = "red";
      });
    });
  </script>
</body>
</html>

这里把所有图片统一用champ-img类，方便批量获取和操作。如果不需要单选效果（允许多张图同时有边框），可以删掉移除所有边框的那行代码。

方案2：事件委托（推荐，适配动态新增图片） #

如果后续会动态添加图片，事件委托是最佳选择——只需要给父容器绑定一次事件，所有子图片（包括未来新增的）都能触发交互逻辑：

<!DOCTYPE html>
<html>
<body>
  <div class="image-container">
    <img src="Champs/Vayne.png" class="champ-img">
    <img src="Champs/Nasus.png" class="champ-img">
    <!-- 后续新增的图片会自动生效，无需额外绑定 -->
  </div>

  <script>
    // 获取父容器
    const container = document.querySelector(".image-container");
    
    container.addEventListener("click", function(e) {
      // 判断点击的元素是不是目标图片
      if (e.target.classList.contains("champ-img")) {
        // 可选：移除所有图片的边框，实现单选
        document.querySelectorAll(".champ-img").forEach(img => img.style.border = "none");
        // 给当前点击的图片添加边框
        e.target.style.border = "2px solid #000";
      }
    });

    // 模拟动态新增图片的场景（测试用）
    setTimeout(() => {
      const newImg = document.createElement("img");
      newImg.src = "Champs/Garen.png";
      newImg.classList.add("champ-img");
      container.appendChild(newImg);
    }, 2000);
  </script>
</body>
</html>

原理是利用事件冒泡：点击图片时，事件会向上冒泡到父容器，父容器通过e.target判断点击的是不是目标图片，再执行样式修改。这种方式不管后续加多少图片，都不用再写额外的绑定代码。

额外优化小提示 #

尽量用CSS类来控制样式，而不是直接修改style属性，这样更易维护。比如先定义一个CSS类：

.active-border {
  border: 2px solid #000 !important;
}

然后在JS里切换这个类：

// 移除所有图片的激活类
document.querySelectorAll(".champ-img").forEach(img => img.classList.remove("active-border"));
// 给当前点击的图片添加激活类
e.target.classList.add("active-border");

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