多卡片中control-price按钮仅单个生效，点击无响应问题排查

问题原因 #

你的JS代码中使用了document.querySelector(".control-price")，这个方法只会返回页面中第一个匹配该选择器的元素，所以只有第一个class为control-price的按钮绑定了点击事件，其余同class按钮没有绑定事件，自然点击无反应。另外原代码中关闭按钮的事件监听存在语法错误（缺少闭合大括号）。

解决方案 #

方案1：遍历所有按钮绑定事件 #

使用document.querySelectorAll(".control-price")获取所有目标按钮，然后通过循环给每个按钮绑定点击事件：

// 获取所有控制按钮
let promoFormOpenBtns = document.querySelectorAll(".control-price");
// 遍历绑定点击事件
promoFormOpenBtns.forEach(btn => {
  btn.addEventListener('click', () => { 
    document.querySelector('.form-reduction-price').style.display = "flex";      
  });
});

// 关闭按钮事件（修复语法错误）
let closedBtn = document.querySelector(".btn-closed");
closedBtn.addEventListener('click', () => {
  document.querySelector('.form-reduction-price').style.display = "none";
}); // 补充缺失的闭合大括号

方案2：事件委托（更推荐） #

利用事件冒泡机制，给父元素绑定一次事件，通过判断点击的目标元素是否是控制按钮来触发逻辑，这种方法更高效，尤其适合后续动态添加按钮的场景：

// 给父元素绑定事件（这里选择最接近的稳定父元素.grid-items-product）
document.querySelector(".grid-items-product").addEventListener('click', (e) => {
  // 判断点击的是否是control-price按钮（包括按钮内的图标）
  if (e.target.closest(".control-price")) {
    document.querySelector('.form-reduction-price').style.display = "flex";
  }
});

// 关闭按钮事件（修复语法错误）
let closedBtn = document.querySelector(".btn-closed");
closedBtn.addEventListener('click', () => {
  document.querySelector('.form-reduction-price').style.display = "none";
});

补充说明 #

• 两种方案都能解决多按钮失效的问题，事件委托在元素数量多或动态生成时性能更优
• 原JS代码中关闭按钮的事件监听缺少闭合大括号，需要补充完整，否则会导致代码报错

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