Как выполнить сценарий EventListener на элементе, который был нажат

Question

Я изучаю ваниль javascript после использования jQuery в течение довольно долгого времени. Я пытаюсь найти 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 работать так, как я ожидал?

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>

Answer 2

В вашей версии jQuery вы используете метод style, который, я думаю, не существует. Я предполагаю, что это опечатка, и вы имели в виду css, но поправьте меня, если я ошибаюсь.

Предположим, что предыдущее верно, и вы вызываете метод jQuery css Есть несколько проблем с вашим переводом кода.

Во-первых, оператор $('.element').click(function(){ добавляет событие click для каждого элемента в DOM с классом element. С document.querySelector('.element').addEventListener('click', event => { вы только добавляете событие click к первому сопоставленному элементу. См. Документацию querySelector .

Если вы хотите добавить событие для каждого элемента, вам следует запросить их с помощью querySelectorAll и выполнить итерацию по коллекции, чтобы добавить прослушиватель событий.

Во-вторых, если вы не используете функцию стрелки для определения обработчика, у вас должен быть HTMLElement, где вы щелкнули по атрибуту this. В качестве альтернативы, если вы хотите использовать функцию стрелки, вы можете использовать event.currentTarget, чтобы получить элемент, по которому щелкнул пользователь.

Принимая это во внимание, вы можете использовать:

var elements = document.querySelectorAll('.element');
elements.forEach(function(element) {
    element.addEventListener('click', function(event) {
        elements.forEach(function(elem) {
            elem.style.backgroundColor = "white";
        });

        this.style.backgroundColor = "red";
    });
});

или в качестве альтернативы, если вы хотите использовать функции стрелок:

var elements = document.querySelectorAll('.element');
elements.forEach(function(element) {
    element.addEventListener('click', event => {
        elements.forEach(function(elem) {
            elem.style.backgroundColor = "white";
        });

        event.currentTarget.style.backgroundColor = "red";
    });
});