Форум

AleksSergSB · #1 (**permalink**) 21.05.2020, 16:07

Лучше это пояснить на примере.
Есть массив элементов. К каждому из них нужно повесить свой обработчик. В обработчике нужно знать какой это элемент, хотя бы в порядке очереди.
Так как обработчики подключаю следующим способом:

const itemArray = document.getElementsByClassName('item');
for(i=0; i<itemArray.length; i++) {
	itemArray[i].onclick = function (){
		что-то делаем..
}

Подумал, что может быть есть возможность сохранить этот самый "i" на этапе привязки обработчиков. Чтобы внутри обработчика знать хотя бы его порядковый номер.

Уже читал про замыкания, но что-то не пойму возможно ли такое замыканием реализовать. Как ни крутил, не получается(

Nexus · #2 (**permalink**) 21.05.2020, 16:15

const itemArray = document.getElementsByClassName('item');
for(i=0; i<itemArray.length; i++) {
	itemArray[i].onclick = (function (i){ 
        return function (){
            // что-то делаем...
        };
    })(i);
}

// или так
document.querySelectorAll('.item').forEach((node, index) => {
    node.addEventListener('click', e => {
        // что-то делаем...
    });
});

AleksSergSB · #3 (**permalink**) 21.05.2020, 16:26

Спасибо большое! Оказывается все просто)

рони · #4 (**permalink**) 21.05.2020, 16:52

AleksSergSB,
for(let i=0; i<itemArray.length; i++)

<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
     .item {
         width: 50px;
         height: 50px;
         background-color: #2320CC;
         margin: 5px;
     }

    </style>



</head>
<body>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script>
const itemArray = document.getElementsByClassName('item');
for(let i=0; i<itemArray.length; i++) {
    itemArray[i].onclick = function (){
       alert(i);
    }
}

  </script>
</body>
</html>

AleksSergSB · #5 (**permalink**) 21.05.2020, 17:12

Сообщение от рони

AleksSergSB,
for(let i=0; i<itemArray.length; i++)

Да да! Конечно! Это для примера быстро набирал)

Форум

Справочник

Discord чат

Курсы javascript