Блог

Главная - Вопросы по программированию - Применять js-код к нескольким тегам li при нажатии, не записывая один и тот же js-код для каждого из них (li)

Применять js-код к нескольким тегам li при нажатии, не записывая один и тот же js-код для каждого из них (li)

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть список html:

 <li>task 1</li>
<li>task 2</li>
<li>task 3</li>
<li>task 4</li>
<li>task n</li>

моя цель — применить js-код (изменить цвет фона на черный) по щелчку, НО без необходимости писать один и тот же js-код снова и снова для каждого li, поскольку у меня будет много li.

вот мой js-код на данный момент:

 const tasks = [document.querySelectorAll('li')];
tasks.forEach(Element => addEventListener("click", myFunc));

function myFunc(){
  //change background-color to black
}

Ответ №1:

Вместо использования forEach вы можете использовать e.target , однако вам нужно будет ввести дополнительную логику, если вы хотите иметь возможность вернуться к red позже.

HTML

 <ul id="taskList">
    <li class="red" style="color:red;">Task 1</li>
    <li class="red" style="color:red;">Task 2</li>
    <li class="red" style="color:red;">Task 3</li>
    <li class="red" style="color:red;">Task 4</li>
</ul>

JS

     function changeColor(el) {   
        if (el.classList.contains('red')) {
            el.style.color = "black";
        }
    }

    document.querySelector('#taskList').addEventListener('click', (e) => {
        changeColor(e.target);
    });

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

1. Рад помочь и добро пожаловать в Stack Overflow. Если этот или любой другой ответ решил вашу проблему, пожалуйста, отметьте его как принятый.

Ответ №2:

Вы можете использовать оператор spread для задач, чтобы разделить элементы в массиве, затем передать аргумент element like функции и делать с ним то, что вы хотите.

Пример:

 const tasks = [...document.querySelectorAll('li')];
tasks.forEach(element => addEventListener("click", () => myFunc(element)));

function myFunc( element ){
  //change background-color to black
  element.style.background = '#000';
}

И если вам нужно событие:

 const tasks = [...document.querySelectorAll('li')];
tasks.forEach(element => addEventListener("click", (e) => myFunc( e, element )));

function myFunc( event, element ){
  //change background-color to black
  element.style.background = '#000';
}

Ответ №3:

С помощью JavaScript кратчайшим подходом было бы привязать событие к ul элементу и внести изменения, используя event.target .

 document.querySelector("ul").addEventListener("click", function(event) {
    var tar = event.target.classList;
    (tar.contains('change')) ? tar.remove('change') : tar.add('change');
});  
 .change {
  background: #000;
  color: #fff;
}  
 <ul>
  <li>task 1</li>
  <li>task 2</li>
  <li>task 3</li>
  <li>task 4</li>
  <li>task n</li>
</ul>

Для jQuery вы можете просто привязать события к li тегу, например :

 $('li').click(function(){
  $(this).toggleClass('change');
});  
 .change {
  background: #000;
  color: #fff;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>task 1</li>
  <li>task 2</li>
  <li>task 3</li>
  <li>task 4</li>
  <li>task n</li>
</ul>

jQuery экономит много времени 🙂