не пойму как вызвать правильный номер элемента при клике
Помогите пожалуйста, при нажатии на Див должен в консоль передаться порядковый номер его, а передается всегда максимум
<html> <body> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <script type="text/javascript"> var items = document.querySelectorAll('.item'); for (var i = 0, max = items.length; i < max ; i++) { var element = items[i]; element.addEventListener('click', function() { console.log('you clicked on ' + i); }); } </script> </body> </html> |
lennaganci,
document.onclick = function(e) {
if ( e.target.classList.contains('item') )
console.log(e.target.innerText);
};
|
|
i - это переменная и к концу цикла она принимает значение, которое и выводится по щелчку. Чтобы быстро понять как это получается, надо убрать цикл:
var i = 5; element.addEventListener('click', function() {console.log('you clicked on ' + i);}); После щелчка выведется 5. ОК. Теперь какая-то функция ниже меняет i i = 'I will be back'; Теперь после щелчка на том же диве (на любом) будет I will be back |
А этот forEach.call просто копирует i в кложу (внутрь другой функции). Геморрой, просто индексируй элементы и затем в любой момент получишь его нумер:
for(var i=0, el, el=elems[i];i++)
el.setAttribute('data-index',i);
parentOfElements.addEventListener('click',function(e){
if(this!==e.target) /* щелкнули по самому отцу */
console.log(e.target.getAttribute('data-index'));
});
Это же html. |
| Часовой пояс GMT +3, время: 18:37. |