VanillaJS - 单击按钮时更改具有相同类的特定按钮的样式[重复]答案

【问题标题】：VanillaJS - Change style of specific button with same class, when button is clicked [duplicate]VanillaJS - 单击按钮时更改具有相同类的特定按钮的样式[重复]
【发布时间】：2020-02-10 19:59:35
【问题描述】：

我有 3 个具有相同类 (myBtn) 的按钮，我想更改使用 querySelectorAll 和 addEventListener 单击的按钮的背景颜色。

我正在做一个更大的项目，这只是我的问题的一个例子，我喜欢纯 JavaScript，出于某种原因我不想在我的 html 中使用 onClick 方法。

var a = document.querySelectorAll('myBtn')[2];
a.addEventListener("click", callFunc());
function callFunc() {
  this.style.backgroundColor = "red";
}

<p>Click the button to change its background color.</p>

<button id="myBtn">uno</button>
<button id="myBtn">dos</button>
<button id="myBtn">tres</button>

【问题讨论】：

html 元素上的 id 每个文档必须是唯一的。 queryselectorall返回一个数组，你需要对其进行迭代并添加事件监听器。
1.更改为 class 而不是 id，2 你需要一个点 3. 你需要从事件处理程序分配中删除 ()：var a = document.querySelectorAll('.myBtn')[2]; a.addEventListener("click", callFunc); function callFunc() { this.style.backgroundColor = "red"; }

标签： javascript css

【解决方案1】：

ID 应该是唯一的。使用类。
在您的样式表中创建一个类（即：.red）并使用.classList.toggle() 或.classList.add()
querySelectorAll() 返回元素的 NodeList 集合。使用.forEach()
PS：[2] 只会给你一个元素，而不是 “...我点击的那个”

const myBtn = document.querySelectorAll('.myBtn');
const changeBackground = ev => ev.currentTarget.classList.toggle('red'); 

myBtn.forEach(el => el.addEventListener('click', changeBackground));

.red { background: #f00; }

<button class="myBtn">uno</button>
<button class="myBtn">dos</button>
<button class="myBtn">tres</button>

【讨论】：