Javascript 在此div中添加一个类，并在一段时间后在Java脚本中将其删除

<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('.content').on("click", function() {
  jQuery(this).addClass("active");
  setTimeout(RemoveClass, 5000);
});

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

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

function showMessage(e) {
  const clickedElement = e.target;
  if (clickedElement.classList.contains("content")) {
    clickedElement.classList.add("active");
    setTimeout(() => {
      clickedElement.classList.remove("active");
    }, 5000);
  }
}

document.querySelector('.main-wrapper').addEventListener('click', showMessage);

.content:hover {
  color: red;
}

<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>

Javascript相关问答推荐

获取表格的左滚动位置

如何通过在提交时工作的函数显示dom元素？

将json数组项转换为js中的扁平

按钮未放置在html dis位置

Google Apps脚本中的discord邀请API响应的日期解析问题

. NET中Unix时间转换为日期时间的奇怪行为

如何从一个列表中创建一个2列的表？

Google maps API通过API返回ZERO_RESULTS，以获得方向请求，但适用于Google maps

CheckBox作为Vue3中的一个组件

在286之后恢复轮询

无法从NextJS组件传递函数作为参数'

将异步回调转换为异步生成器模式

获取'；无法解决导入和导入"；slick-carousel/slick/slick-theme.css"；'；错误

无法读取未定义的属性(正在读取合并)-react RTK

如何用javascript更改元素的宽度和高度？

处理TypeScrip Vue组件未初始化的react 对象

如何通过Axios在GraphQL查询中发送数组

Clip-Path在网页浏览器(Mozilla、Edge、Chrome)上不能正常工作，但在预览版Visual Code Studio HTML、CSS、JS上却能很好地工作

ReactJS Sweep Line：优化SciChartJS性能，重用wasmContext进行多图表渲染

如何动态呈现适合未知屏幕大小的最大数量的表行？苗条的