Вход

Просмотр полной версии : Запомнить значение "динамической" переменной в функции

AleksSergSB
21.05.2020, 16:07
Лучше это пояснить на примере.
Есть массив элементов. К каждому из них нужно повесить свой обработчик. В обработчике нужно знать какой это элемент, хотя бы в порядке очереди.
Так как обработчики подключаю следующим способом:
const itemArray = document.getElementsByClassName('item');
for(i=0; i<itemArray.length; i++) {
itemArray[i].onclick = function (){
что-то делаем..
}Подумал, что может быть есть возможность сохранить этот самый "i" на этапе привязки обработчиков. Чтобы внутри обработчика знать хотя бы его порядковый номер.

Уже читал про замыкания, но что-то не пойму возможно ли такое замыканием реализовать. Как ни крутил, не получается(
Nexus
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
21.05.2020, 16:26
Спасибо большое! Оказывается все просто)
рони
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
21.05.2020, 17:12
AleksSergSB,
for(let i=0; i<itemArray.length; i++)Да да! Конечно! Это для примера быстро набирал)