Блог

Главная - Вопросы по программированию - Функция справки Javascript для скрытия каждого элемента списка независимо

Функция справки Javascript для скрытия каждого элемента списка независимо

#javascript #html #css #list #html-helper

Вопрос:

Может ли кто-нибудь, пожалуйста, помочь мне с функцией скрытия элемента списка, одного за другим, при нажатии на него? Я заставил его работать только для одного элемента, но я не уверен, как это будет работать для всех них.

Предположим, у меня есть список из 5 элементов. Когда я нажимаю на элемент 1, он исчезает. Если я нажму на второй элемент, он также исчезнет и так далее.

Я бы хотел, чтобы это делалось только на javascript vanilla

Это то, что я пробовал до сих пор:

 <!DOCTYPE html>
<html>
<body>


<ul>
  <li id ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee</li>
  <li class ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee 2</li>
  <li class ="id1"  onclick="document.getElementById('id1').style.visibility='hidden'">Coffee 3</li>

</ul>  

</body>
</html>

Комментарии:

1. Все ваши onClick получают элемент с идентификатором 1. Каждый из них нацелен на идентификатор своего элемента.

Ответ №1:

Вы можете просто сделать это, передав event параметр в функцию обработчика щелчков.

Когда вы определяете свой html таким onclick="onListItemClick(event)" образом , Javascript автоматически отправляет event объект в вашу функцию.

Event объект обладает множеством свойств внутри него. Но все, что вас интересует, — это то, на event.target какой элемент вы нажали.

Затем вы можете легко манипулировать любой частью этого html-элемента.

 function onListItemClick(event) {
  event.target.style.visibility = 'hidden';
} 
 <!DOCTYPE html>
<html>

<body>
  <ul>
    <li onclick="onListItemClick(event)">Coffee 1</li>
    <li onclick="onListItemClick(event)">Coffee 2</li>
    <li onclick="onListItemClick(event)">Coffee 3</li>
  </ul>

</body>

</html>

Ответ №2:

Не используйте встроенные атрибуты событий HTML. Лучшая практика-делегирование полномочий. Добавьте класс в свой ul , чтобы вам нужен был только один eventListener .

 document.querySelector(".unordered-list").addEventListener("click", function(e) {
  if (e.target.classList.contains("id1")) {
    e.target.style.opacity = 0;
  }
}); 
 <ul class="unordered-list">
  <li class="id1">Coffee</li>
  <li class="id1">Coffee 2</li>
  <li class="id1">Coffee 3</li>
</ul>
Метки: