|
узнать номер елемента в массиве при клике
есть 5 дивов, с классом а
есть переменная myVar где -- > .getElementsByClassName('a'); потом addEvent.... и функция в которой нужно: чтобы при клике на див у меня был alert с номером дива в массиве. Пример для того чтобы обратиться к одному из дивов мне нужно делать так : myVar[х]. нужно чтобы в "х" заганялся номер дива на которого я кликнул и выводился через alert |
var myVar = document.getElementsByClassName('a'); myVar[0].parentNode.addEventListener('click', function(e) { var self = e.target; if(self.className != 'a') return; var i = myVar.length; while(i--) { if(myVar[i] == self) { var x = i; break; } } alert(x); }); |
<style> div.a { padding:5px; margin: 5px; background-color: red; float: left; } </style> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> <div class="a">4</div> <div class="a">5</div> <script> (function () { var divs = document.querySelectorAll("div.a"), len = divs.length, i = 0; for (; divs[i].setAttribute("onclick", "clval(" + i + ")"), ++i < len;); clval = function (e) { alert(e); }; }()); </script> |
Фу setAttribute('onclick'), фу clval без var.:-E
<style> div.a { padding:5px; margin: 5px; background-color: red; float: left; } </style> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> <div class="a">4</div> <div class="a">5</div> <script> (function () { var divs = document.querySelectorAll("div.a"); var handler = function() { // var index = this.dataset.index; var index = this.getAttribute('data-index'); alert(index); } for (var i = 0; i < divs.length; i++) { // divs[i].dataset.index = i; divs[i].setAttribute('data-index', i); divs[i].onclick = handler; } }()); </script> ES5: <style> div.a { padding:5px; margin: 5px; background-color: red; float: left; } </style> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> <div class="a">4</div> <div class="a">5</div> <script> (function () { var divs = document.querySelectorAll("div.a"); var handler = function() { var index = Array.prototype.indexOf.call(divs, this); alert(index); } for (var i = 0; i < divs.length; i++) { divs[i].onclick = handler; } }()); </script> |
Вообще, имхо, индекс нафиг не нужен, как и массив. Кликнутый див в колбэк и так передаётся через target/this.)
|
var elements = document.querySelectorAll('.a') || []; elements = [].slice.apply(elements); // toArray elements.forEach(function (element, i) { element.addEventListener('click', function () { alert(this); // див на который кликнули alert(element); // див на который кликнули alert(i); // номер дива на который кликнули }) }); учитесь рукожопчики мои |
показал заодно парню как с селекторами работать, как ты заметил. думаешь путаницы больше вносит?
Цитата:
Цитата:
|
Цитата:
|
Цитата:
Цитата:
var elements = [].slice.call(document.querySelectorAll('.a')); elements.forEach(function (element, i) { element.addEventListener('click', function () { alert(this); // див на который кликнули alert(element); // див на который кликнули alert(i); // номер дива на который кликнули }) }); |
Цитата:
Цитата:
<style> div.a { padding:5px; margin: 5px; background-color: red; float: left; } </style> <div class="a">1</div> <div class="a">2</div> <div class="a">3</div> <div class="a">4</div> <div class="a">5</div> <script> (function () { "use strict"; var divs = document.querySelectorAll("div.a"), len = divs.length, i = 0; for (; divs[i].setAttribute("onclick", "clval(" + i + ")"), ++i < len;); clval = function (e) { alert(e); }; }()); </script> Ну и вобще речь не про работает/не работает. Ты ведь сам знаешь - бывает код работает, но в адрес его автора хочется сказать много нехороших слов. |
Часовой пояс GMT +3, время: 16:38. |
|