javascript - 如何在被点击的元素上执行 EventListener 脚本

Question

在使用 jQuery 很长一段时间后，我正在学习 vanilla javascript。我正在尝试找到与此等效的javascript：

$('.element').click(function(){
 $('.element').style("background-color","white");
 $(this).style("background-color","red");
});

到目前为止，这是我想出的：

document.querySelector('.element').addEventListener('click', event => {
  var y = document.getElementsByClassName('element');
  for (i = 0; i < y.length; i++) {
    y[i].style.backgroundColor = "white";
  }
  this.style.backgroundColor = "red";
});

我需要做什么才能使this关键字按预期工作？

标签： javascriptjquery

Answer 1

我的解释是，您有多个元素，但您编写它的方式是针对单个元素querySelector('.element')。这只会让你获得第一个.element。

你可以试试这样的东西吗？很简单。只需使用事件。

const elements = document.querySelectorAll(".element");

function updateBgColor(e) {
  elements.forEach(el => {
    el.style.background = "white";
  });
  e.currentTarget.style.background = "red";
};

elements.forEach(el => {
  el.addEventListener("click", updateBgColor);
});

body {
  background: grey;
}

.element {
  padding: 5px;
  margin-bottom: 5px;
  text-align: center;
  width: 200px;
}

<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>
<div class="element">Click me</div>