Я пытаюсь перейти на использование старого старого Javascript (отход от jQuery из-за проблем со скоростью). Мне нужно вызвать событие щелчка на чем-то, а затем переключить класс на главном элементе. Вот что у меня есть:

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.classList.toggle("active");
});

https://jsfiddle.net/h12o073L/17/

Проблема в том, что я ТОЛЬКО хочу, чтобы главный элемент добавил класс, а не ребенок! В настоящее время, если я нажимаю на одну из цен, она получает класс .active (тогда как я хочу, чтобы элемент .wrapper-dropdown добавил класс)

Я должен признать - я стал очень ленивым с jQuery, поэтому я, вероятно, упускаю что-то простое;)

0
Andrew Newby 26 Фев 2018 в 11:49

3 ответа

Лучший ответ

Вам следует использовать функцию .closest() выбрать целевой .wrapper-dropdown.

Метод Element.closest() возвращает ближайшего предка текущий элемент (или сам текущий элемент) , который соответствует селекторы приведены в параметре. Если нет такого предка, это возвращает null.

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.target.closest('.wrapper-dropdown').classList.toggle("active");
});
document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
  event.target.closest('.wrapper-dropdown').classList.toggle("active");
});
<div id="dd-price-from" class="wrapper-dropdown" tabindex="1">
  <span>Price From</span>
  <ul class="dropdown">
    <li data-what="20"><a href="#">€20</a></li>
    <li data-what="50"><a href="#">€50</a></li>
  </ul>
</div>
1
Zenoo 26 Фев 2018 в 08:55

Вы хотите, чтобы класс .active был добавлен только к .wrapper-dropdown. Вы можете использовать currentTarget, это всегда будет относиться к элементу, к которому вы прикрепляете обработчик события.

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
   event.currentTarget.classList.toggle("active");
});
2
user9383661user9383661 26 Фев 2018 в 08:53

Вы можете использовать this внутри функции прослушивателя событий:

document.querySelector('.wrapper-dropdown').addEventListener("click", function(event) {
 this.classList.toggle("active");

});

2
Sergii Vorobei 26 Фев 2018 в 08:54