3

На HTML странице есть список с одинаковыми классами.

Необходимо чтобы при клике по любому из элементов списка, этот элемент менял фоновый цвет.

<ul>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Я могу сохранить коллекцию в переменную, но как потом узнать, по какому именно из элементов совершен клик?

Если обращаюсь с индексом but[1], то все работает. Естественно, я не могу присвоить свойство всей коллекции.

Подскажите, что добавить или исправить в коде?

var but = document.querySelectorAll('.list-group-item');
but.onclick = function() {
  but.style.backgroundColor = 'red';
};
0

2 ответа 2

4

немного улучшим ответ Dmitry
сделаем все лаконичней

var buts = document.querySelectorAll('.list-group-item');

buts.forEach(but => {
  but.onclick = () => { but.style.backgroundColor = 'red';};
});
<ul>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

4
  • Если так то уже тогда можно document.querySelectorAll('.list-group-item').forEach(but => but.onclick = () => but.style.backgroundColor = 'red'); 17 июн 2017 в 13:25
  • не понял что значит это часть кода?<code>but => </code> чему должен быть равен(или больше) переменная but там же после него уже кавычка стоит.
    – Randall
    17 июн 2017 в 13:54
  • 2
    @DuuudeXX8 это стрелочная функция ()=>{} появившаяся в es6
    – bad4iz
    17 июн 2017 в 15:41
  • Спасибо большое
    – Randall
    18 июн 2017 в 10:58
2

Нужно на каждый элемент повесить обработчик события click. Например, с помощью цикла

var but = document.querySelectorAll('.list-group-item');

for (i = 0, len = but.length; i < len; i++) {
  but[i].onclick = function() {
    this.style.backgroundColor = 'red';
  };
}
<ul>
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

3
  • Святая корова! Спасибо тебе большое, милый человек) Я знал что нужно обработать коллекцию как массив, но КАК это сделать не понимал.
    – mccrush
    17 июн 2017 в 6:31
  • Ну тогда и небольшой оффтоп. Почему мы заранее определяем переменную len в данном случае: (var i = 0, len = but.length; i < len; i++). Чем не хорош такой вариант: (var i = 0; i < but.length; i++)?
    – mccrush
    17 июн 2017 в 6:35
  • Длина массива length вычисляется каждый раз. Чтобы улучшить производительность, мы запоминаем значение в переменной. Это особенно важно для массивов DOM элементов, как в нашем случае. Тест
    – Dmitry
    17 июн 2017 в 6:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.