Запомнить значение "динамической" переменной в функции
Лучше это пояснить на примере.
Есть массив элементов. К каждому из них нужно повесить свой обработчик. В обработчике нужно знать какой это элемент, хотя бы в порядке очереди. Так как обработчики подключаю следующим способом:
const itemArray = document.getElementsByClassName('item');
for(i=0; i<itemArray.length; i++) {
itemArray[i].onclick = function (){
что-то делаем..
}
Подумал, что может быть есть возможность сохранить этот самый "i" на этапе привязки обработчиков. Чтобы внутри обработчика знать хотя бы его порядковый номер.Уже читал про замыкания, но что-то не пойму возможно ли такое замыканием реализовать. Как ни крутил, не получается( |
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,
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>
|
Цитата:
|
| Часовой пояс GMT +3, время: 21:33. |