时间戳

首页 > 解决方案 > 有没有办法向具有特定类的所有 html 元素添加函数

javascript - 有没有办法向具有特定类的所有 html 元素添加函数

问题描述

我想选择具有特定类的所有 html 元素并使用 onClick 事件调用函数

HTML 代码

<div class="card shadow boxToggle"></div>
<div class="card shadow boxToggle"></div>
<div class="card shadow boxToggle"></div>
<div class="card shadow boxToggle"></div>

当我单击 anydiv.boxToggle时，我想向它添加一个类。

我试过的

1.方法

<div class="card shadow boxToggle" onClick="a_function()"></div>
<div class="card shadow boxToggle" onClick="a_function()"></div>

2.方法

const box = document.querySelectorAll('.boxToggle')
box.forEach((b) => {
  b.addEventListener("click", toggle)
})

function toggle(event) {
  console.log(event)
  event.target.classList.toggle("boxChange");
}

在不使用 jQuery 的情况下，有没有其他更短更好的方法来解决这个问题？

标签： javascripthtml

解决方案

是的，代表团

const toggle = event => {
  const tgt = event.target.closest("div");
  if (tgt.classList.contains("card")) {
    console.log(tgt.textContent)
    tgt.classList.toggle("boxChange")
  }
};

document.getElementById("container").addEventListener("click", toggle);
<div id="container">
  <div class="card shadow boxToggle"><h1>1</h1><p>Click me too</p></div>
  <div class="card shadow boxToggle">2</div>
  <div class="card shadow boxToggle">3</div>
  <div class="card shadow boxToggle">4</div>
</div>

删除（但我建议在数据属性中设置一个标志或只是一个布尔值）

 document.getElementById("container").removeEventListener("click", toggle)

推荐阅读