如何为每个元素应用JavaScript？多个人名片交互效果失效求助

你用的document.querySelector()只会返回页面中第一个匹配选择器的元素，复制第二张名片后，JS事件只绑定在了第一张的.cancel、.arr_container和.left_container上，第二张的元素完全没被选中，自然不会触发交互。另外你的代码里有个低级语法错误：const clc = document.querySelector(".cancel").末尾多了个英文句号，得删掉，不然会直接报错。

核心逻辑是：选中所有名片的交互元素，逐个绑定事件，并且在事件触发时，只操作当前点击元素所在名片内的对应容器，而不是全局的单个元素。

1. 批量选中所有目标元素 #

用document.querySelectorAll()替代querySelector()，它会返回页面中所有匹配选择器的元素集合。

2. 遍历元素绑定事件，关联当前名片的容器 #

通过closest()方法找到当前点击元素所属的名片父容器，再从这个容器里获取对应的left_container和箭头元素，确保操作的是当前名片的内容，不会影响其他名片。

修改后的可运行代码 #

// 修复语法错误，批量选中所有取消按钮和箭头容器
const cancelBtns = document.querySelectorAll(".cancel");
const arrowContainers = document.querySelectorAll(".arr_container");

// 给每个箭头绑定展开事件
arrowContainers.forEach(arrow => {
  arrow.addEventListener("click", () => {
    arrow.classList.add("active_arr");
    // 找到当前箭头所在名片内的left_container（替换.card为你的名片父容器类名）
    const leftContainer = arrow.closest(".card").querySelector(".left_container");
    if (leftContainer.classList.contains("off")) {
      leftContainer.classList.remove("off");
      leftContainer.classList.add("active");
    }
  });
});

// 给每个取消按钮绑定收起事件
cancelBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    // 找到当前按钮所在名片内的箭头容器
    const arrow = btn.closest(".card").querySelector(".arr_container");
    arrow.classList.remove("active_arr");
    // 找到当前按钮所在名片内的left_container
    const leftContainer = btn.closest(".card").querySelector(".left_container");
    if (leftContainer.classList.contains("active")) {
      leftContainer.classList.remove("active");
      leftContainer.classList.add("off");
    }
  });
});

关键提示 #

• 把代码里的.card换成你实际包裹单个名片的父元素类名（比如你的名片是用<div class="business-card">包裹的，就改成.business-card），这样closest()才能精准定位到当前点击元素所属的名片。
• 如果你的DOM结构更简单，也可以用arrow.parentElement.querySelector(".left_container")这种方式，但closest()适配性更强，不管嵌套层级多深都能找到最近的父容器。

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