点击两个同class链接时移除HTML类的JavaScript实现问题

云原生阿岚

2026-8-7

解决方案

问题根源

你遇到的问题核心是：document.querySelector('.close-cart')只会返回页面中第一个匹配该类名的元素，所以第二个关闭按钮根本没有绑定点击事件。同理，如果页面有多个.trigger-cart按钮，querySelector也只会给第一个添加打开事件。

两种可行的修复方案

方案1：遍历所有目标元素绑定事件

使用querySelectorAll获取所有匹配的按钮，然后通过循环给每个元素添加事件监听。这种方式直观，适合元素固定的场景：

const html = document.querySelector('html');
// 获取所有打开按钮
const btnOpens = document.querySelectorAll('.trigger-cart');
// 获取所有关闭按钮
const btnCloses = document.querySelectorAll('.close-cart');

// 给每个打开按钮绑定事件
btnOpens.forEach(btn => {
  btn.addEventListener('click', e => {
    e.preventDefault();
    html.classList.add('cart-visible');
  });
});

// 给每个关闭按钮绑定事件
btnCloses.forEach(btn => {
  btn.addEventListener('click', e => {
    e.preventDefault();
    html.classList.remove('cart-visible');
  });
});

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

利用事件冒泡机制，给一个父级元素（比如document或者更接近的容器）绑定一次事件，通过判断点击目标的类名来执行对应操作。这种方式不需要逐个绑定事件，哪怕后续动态添加新的打开/关闭按钮，也能自动生效，性能更优：

const html = document.querySelector('html');

document.addEventListener('click', e => {
  // 点击打开按钮
  if (e.target.classList.contains('trigger-cart')) {
    e.preventDefault();
    html.classList.add('cart-visible');
  }
  // 点击关闭按钮
  else if (e.target.classList.contains('close-cart')) {
    e.preventDefault();
    html.classList.remove('cart-visible');
  }
});