|
узнать номер елемента в массиве при клике
есть 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. |
|