1

Привет. Есть такой код

<div class='wrapper'>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
<div class='dot'></div>
</div>

Через команду

var dots = document.getElementsByClassName('dots');

Получил массив с dot.

Как при клике на каждый в console высвечивалось его index Кликаю на первый элемент в консоль его индекс(0)

очень прошу дать пример кода,

3
  • но indexOf тут не работает. как быть? <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> var cont = document.getElementById("container"); var dots = document.getElementsByClassName('dot'); cont.addEventListener("click", function(event) { console.log(dots.indexOf(event.target)); }); <!-- language: lang-html --> <div id='container'> <div class='dot'>as1</div> <div class='dot'>sa2</div> <div class='dot'>as3</div> <div class='dot'>as4</div> </div> <!-- end snippet --> 22 фев 2018 в 21:58
  • Возможный дубликат вопроса: Как отслеживать изменение класса
    – Air
    22 фев 2018 в 22:39

1 ответ 1

6

Вариант 1 (плохой, но очевидный):

dots.forEach(function(dot, i) {
    dot.addEventListener("click", function() {
        console.log(i);
    });
});

Плох он тем, что приходится навешивать слишком много (а точнее, неоправданно много) обработчиков.

Вместо foreach() можно, разумеется, воспользоваться и простым циклом:

var i, length = dots.length;

for (i = 0; i < length; i++) {
    dots[i].addEventListener("click", function() {
        console.log(i);
    });
}

Вариант 2 (получше):

Для его реализации необходимо обернуть необходимые элементы в родительский элемент, своего рода "контейнер" (предположим, у него id = cont).

Тогда можно навесить один обработчик события на этот контейнер:

var cont = document.getElementById("cont");

cont.addEventListener("click", function(event) { // навешиваем один обработчик на родительский элемент
    console.log(dots.indexOf(event.target)); // в свойстве `target` будет содержаться непосредственно тот элемент, по которому кликнули
});

Но в этом случае придется искать индекс элемента в массиве отдельно (метод indexOf()).

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

cont.addEventListener("click", function(event) {
    var index = dots.indexOf(event.target);

    if (~index) {
        console.log(index);
    }
});

Ваш ответ

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

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