如何正确使用getElementsByClassName实现多卡片触发模态框？

问题根源 #

你的代码中document.getElementsByClassName("Info-btn")[0]只获取了类名为Info-btn的第一个元素，仅给它绑定了点击事件，因此其余卡片无法触发模态框。另外，多个卡片使用了相同的id="Info-btn"，这不符合HTML规范（id必须唯一），需要先移除重复的id属性。

解决方案 #

有两种常用方案可以解决这个问题，根据你的场景选择：

方案一：遍历所有卡片绑定点击事件 #

获取所有.Info-btn元素，通过循环给每个元素单独绑定点击事件：

<!-- 修正后的HTML：移除重复的id属性 -->
<div class="user-card Info-btn" style="display: flex; width: 400px;">
  <!-- 卡片内容不变 -->
</div>
<div class="user-card Info-btn" style="display: flex; width: 400px;">
  <!-- 第二个卡片内容 -->
</div>

var infomodal = document.getElementById("info-modal");
var infospan = document.getElementsByClassName("infoclose")[0];

// 获取所有带Info-btn类的卡片
var infobtns = document.getElementsByClassName("Info-btn");

// 遍历每个卡片，绑定点击事件
for (let i = 0; i < infobtns.length; i++) {
  infobtns[i].addEventListener("click", function() {
    infomodal.style.display = "block";
  });
}

// 关闭模态框逻辑保持不变
infospan.addEventListener("click", function() {
  infomodal.style.display = "none";
});

window.addEventListener("click", function(event) {
  if (event.target == infomodal) {
    infomodal.style.display = "none";
  }
});

方案二：使用事件委托（更高效，支持动态添加卡片） #

将点击事件绑定到所有卡片的父容器上，利用事件冒泡机制处理点击，这种方式不需要给每个卡片单独绑定事件，即使后续动态添加新卡片也能自动生效：

<!-- 假设所有卡片都放在一个父容器内 -->
<div class="cards-container">
  <div class="user-card Info-btn" style="display: flex; width: 400px;">
    <!-- 卡片内容 -->
  </div>
  <div class="user-card Info-btn" style="display: flex; width: 400px;">
    <!-- 第二个卡片内容 -->
  </div>
</div>

var infomodal = document.getElementById("info-modal");
var infospan = document.getElementsByClassName("infoclose")[0];
// 获取卡片的父容器
var cardsContainer = document.querySelector(".cards-container");

// 给父容器绑定点击事件
cardsContainer.addEventListener("click", function(event) {
  // 判断点击的元素是否属于某个Info-btn卡片（包括卡片内的子元素）
  if (event.target.closest(".Info-btn")) {
    infomodal.style.display = "block";
  }
});

// 关闭模态框逻辑保持不变
infospan.addEventListener("click", function() {
  infomodal.style.display = "none";
});

window.addEventListener("click", function(event) {
  if (event.target == infomodal) {
    infomodal.style.display = "none";
  }
});

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