如何用原生JavaScript实现点击div添加active类并延时移除？

我需要实现点击div时为其添加active类，一段时间后移除该类，后续还要操作该div内的内容。目前用jQuery已经实现了功能，但原生JavaScript的尝试仅对第一个元素生效，求正确的实现方法。

现有代码 #

HTML #

<div class="main-wrapper">
  <div class="content" onclick="showMessage()">
    Content div
  </div>
  <div class="content" onclick="showMessage()">
    Content div
  </div>
  <div class="content" onclick="showMessage()">
    Content div
  </div>
  <div class="content" onclick="showMessage()">
    Content div
  </div>
  <div class="content" onclick="showMessage()">
    Content div
  </div>
</div>

可用的jQuery代码 #

jQuery('.content').on("click", function() {
  jQuery(this).addClass("active");
  setTimeout(RemoveClass, 5000);
});

function RemoveClass() {
  jQuery(this).removeClass("active");
}

有问题的原生JavaScript代码 #

function showMessage(){
  document.querySelector(".content").classList.toggle("active");
  setTimeout(() => {
    document.querySelector(".content").classList.toggle("active");
  }, 600)
}

问题原因 #

你的原生JS代码中，document.querySelector(".content")只会返回匹配选择器的第一个DOM元素，所以无论点击哪个div，操作的都是第一个元素，导致只有第一个div生效。

解决方案 #

方案1：修改onclick事件，传递当前元素 #

修改HTML中的onclick属性，把当前点击的元素作为参数传入函数：

<div class="main-wrapper">
  <div class="content" onclick="showMessage(this)">
    Content div
  </div>
  <div class="content" onclick="showMessage(this)">
    Content div
  </div>
  <div class="content" onclick="showMessage(this)">
    Content div
  </div>
  <div class="content" onclick="showMessage(this)">
    Content div
  </div>
  <div class="content" onclick="showMessage(this)">
    Content div
  </div>
</div>

然后更新JS函数，直接操作传入的元素：

function showMessage(element) {
  element.classList.add("active");
  setTimeout(() => {
    element.classList.remove("active");
    // 这里可以操作当前div内的内容，示例：
    // element.querySelector('.child-element').textContent = '更新内容';
  }, 600);
}

方案2：事件委托（推荐，解耦HTML与JS） #

去掉HTML中的onclick属性，通过父元素绑定事件，利用事件冒泡判断点击目标：

<div class="main-wrapper">
  <div class="content">
    Content div
  </div>
  <div class="content">
    Content div
  </div>
  <div class="content">
    Content div
  </div>
  <div class="content">
    Content div
  </div>
  <div class="content">
    Content div
  </div>
</div>

JS代码：

document.querySelector('.main-wrapper').addEventListener('click', function(e) {
  // 确认点击的是.content类的元素
  if (e.target.classList.contains('content')) {
    const target = e.target;
    target.classList.add('active');
    setTimeout(() => {
      target.classList.remove('active');
      // 操作div内内容的示例：
      // target.innerHTML += '<p>操作后的内容</p>';
    }, 600);
  }
});

这种方式的优势在于：即使后续动态添加新的.content元素，事件依然生效，同时HTML结构更简洁，避免了内联事件的耦合。

补充：修复你的jQuery代码小问题 #

原jQuery代码中，setTimeout(RemoveClass, 5000)会导致RemoveClass函数内的this指向window，无法正确移除类，修复后代码：

jQuery('.content').on("click", function() {
  const $current = jQuery(this);
  $current.addClass("active");
  setTimeout(() => {
    $current.removeClass("active");
  }, 5000);
});

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