新手求助：JavaScript实现点击添加类并移除特定类的方法

嘿，作为JavaScript新手碰到这个需求完全不用慌，这是个超常见的交互场景，实现起来一点都不难，我给你两种实用方案，你按需选就行～

最省心的方案：用classList.toggle()直接搞定 #

原生JS里的classList.toggle()简直是为这个需求量身打造的——它会自动判断元素是否包含指定类：有就移除，没有就添加，一步到位。

单个目标元素的情况 #

假设你要点击的是最外层的.site元素，代码可以这么写：

// 先等DOM加载完再执行脚本，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  // 获取你要操作的元素
  const targetElement = document.querySelector('.site');
  
  // 给元素绑定点击事件
  targetElement.addEventListener('click', function() {
    // 切换你需要的特定类，这里用'active'举例，换成你实际要用的类名就行
    this.classList.toggle('active');
  });
});

多个同类型元素的情况 #

如果页面上有多个.site元素都要实现这个功能，就用querySelectorAll遍历绑定：

document.addEventListener('DOMContentLoaded', function() {
  const elements = document.querySelectorAll('.site');
  
  elements.forEach(element => {
    element.addEventListener('click', function() {
      this.classList.toggle('active');
    });
  });
});

手动判断的方案（适合理解原理） #

要是你想搞清楚背后的逻辑，也可以手动判断元素是否含目标类，再执行添加/移除操作：

document.addEventListener('DOMContentLoaded', function() {
  const targetElement = document.querySelector('.site');
  const targetClassName = 'active'; // 换成你要切换的类名
  
  targetElement.addEventListener('click', function() {
    if (this.classList.contains(targetClassName)) {
      // 元素已有这个类，移除它
      this.classList.remove(targetClassName);
    } else {
      // 元素没有这个类，添加它
      this.classList.add(targetClassName);
    }
  });
});

小提醒 #

• 如果你想点击的不是.site，而是它的子元素（比如.site-image或.site-name），只需要把querySelector里的选择器改成对应的类名就行。
• 类名要写准确，大小写也得对应上哦～

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