Не удаляются и не добавляются классы

Question

Не удаляются и не добавляются классы

Рейтинг: 0Ответов: 2Опубликовано: 16.05.2023

Коллеги, добрый день. Написал простенькую схему, при клике на ссылку должно выводиться на экран сообщение, но я кликаю на ссылку - ничего не происходит. Так же прописал ссылке отмену перехода по ссылке при нажатии на неё, пробовал это убирать - не работает всё равно, что я делаю не так?

$(".green__left-top-title").click((event) => {
  event.preventDefault();
});
const greenLink = document.querySelectorAll('.green__left-top-title');

greenLink.addEventListener('click', (event) => {

  alert('Test');

});

<div class="green__left-top">
  <a href="#green-1" class="green__left-top-title">продажа</a>
  <a href="#green-2" class="green__left-top-title">закрепление</a>
  <a href="#green-3" class="green__left-top-title">ограничения</a>
</div>

javascript html

Источник: Stack Overflow на русском

Answer 1

▲ 4Принят

querySelectorAll возвращает коллекцию элементов. Их нужно перебрать в цикле, допустим через метод forEach(). То есть на каждый элемент вешаем слушатель.

const greenLink = document.querySelectorAll('.green__left-top-title');

greenLink.forEach(el => {  
  el.addEventListener('click', e => {
    e.preventDefault();
    alert(el.href);
  })
})

<div class="green__left-top">
  <a href="#green-1" class="green__left-top-title">продажа</a>
  <a href="#green-2" class="green__left-top-title">закрепление</a>
  <a href="#green-3" class="green__left-top-title">ограничения</a>
</div>

Answer 2

▲ 3

не работает всё равно, что я делаю не так?

Используй делегирование событий. Таким образом ты обойдешься одним обработчиком на все однотипные элементы…

$(".green__left-top").click(event => {
  const o = event.target
  if (o.tagName != 'A') return
  event.preventDefault();
  alert(o.textContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="green__left-top">
  <a href="#green-1" class="green__left-top-title">продажа</a>
  <a href="#green-2" class="green__left-top-title">закрепление</a>
  <a href="#green-3" class="green__left-top-title">ограничения</a>
</div>

Вариант на чистом JS будет не особо отличаться...

document.querySelector(".green__left-top").addEventListener('click', event => {
  const o = event.target
  if (o.tagName != 'A') return
  event.preventDefault();
  alert(o.textContent);
});

<div class="green__left-top">
  <a href="#green-1" class="green__left-top-title">продажа</a>
  <a href="#green-2" class="green__left-top-title">закрепление</a>
  <a href="#green-3" class="green__left-top-title">ограничения</a>
</div>

Добавил еще вариант с другим методом jQuery...

$(".green__left-top").on('click', 'a', e => {
  const o = e.target
  e.preventDefault();
  alert(o.textContent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="green__left-top">
  <a href="#green-1" class="green__left-top-title">продажа</a>
  <a href="#green-2" class="green__left-top-title">закрепление</a>
  <a href="#green-3" class="green__left-top-title">ограничения</a>
</div>

Не удаляются и не добавляются классы

Ответы