JavaScript - Как получить элемент из массива после нажатия на него

-1

У меня есть некоторые дивы, как это:JavaScript - Как получить элемент из массива после нажатия на него

<div id="one"></div> 
<div id="two"></div> 
<div id="three"></div> 
<div id="four"></div> 
<div id="five"></div> 
<div id="six"></div> 
<div id="seven"></div>

их (ID) s разные, но я применил тот же имя класса на них, Так , Теперь я могу получить к ним доступ

var box = document.getElementsByClassName("clsname");

это создало массив с именем box. Я хочу написать функцию JavaScript, которая возвращает элемент clicked в массиве. Например, функция будет активирована, когда я нажму на любое поле и верну элемент с щелчком (div).

Я хочу сделать это с чистым JS, не JQuery пожалуйста :)

Благодарности

источник

2016-09-02 Towkir

_ «но я применил то же имя класса на них» _ Не по вашему примеру – j08691

я не хочу, чтобы сделать код грязным, поэтому сказал, что это ниже коды :) – Towkir

Вот простой способ петлю над ними и добавить слушатель события:

var testList = document.getElementsByClassName("clsname"); 

for(var i = 0; i < testList.length; i++) { 
    testList[i].addEventListener('click', function() { 
     console.log(this.id); 
    }); 
}

Вот JSBin с примером на нем.

Что делает код, это цикл через NodeList, а затем добавить прослушиватель событий при щелчке для регистрации их идентификатора. Вот отрывок:

var testList = document.getElementsByClassName("test"); 
 

 
for(var i = 0; i < testList.length; i++) { 
 
    testList[i].addEventListener('click', function() { 
 
     console.log(this.id); 
 
    }); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="one" class="test">1</div> 
 
    <div id="two" class="test">2</div> 
 
    <div id="three" class="test">3</div> 
 
    <div id="four" class="test">4</div> 
 
    <div id="five" class="test">5</div> 
 
    <div id="six" class="test">6</div> 
 
    <div id="seven" class="test">7</div> 
 
</body> 
 
</html>

Если вы хотите, вы можете использовать forEach цикл из массива следующим образом:

var testList = document.getElementsByClassName("clsname"); 

Array.prototype.forEach.call(testList, function(element, index) { 
    element.addEventListener('click', function() { 
     console.log(this.id); 
    }); 
});

источник

2016-09-02 17:33:57 Li357

Это очень неэффективно. Если список - это тысячи элементов.Если после цикла будут добавлены новые элементы, они также не будут подключены к слушателю. – jhummel

@jhummel Это очень верно, но если бы у вас был документ с тысячами элементов, каждый из них с идентификатором и классом тоже был бы неэффективен. Это соответствует потребностям OP и не столь неэффективно для его использования. – Li357

Я просто чувствую, почему добавить семь слушателей событий, когда один из них так же прост, эффективен и более надежен в будущем. – jhummel

Я думаю, что самый эффективный способ сделать это было бы делегировать событие родительской оболочки.

<!-- add a surrounding div --> 
<div id="myDiv"> 
    <div id="one" class="clsname"></div> 
    <div id="two" class="clsname"></div> 
    ... 
</div> 

<script> 
    document.getElementById("myDiv").addEventListener("click",function(e) { 
    // e.target was the clicked element, do something interesting with it. 
    console.log(e.target); 
    }); 
</script>

Если вы хотите получить фантазии, вы можете использовать спички API Element, чтобы иметь правильный элемент, а не потомком дивы.

var el = e.target; 
while(!el.matches("div.clss")) { 
    el = el.parentNode; 
} 

// should always be the div and not some child element that was clicked. 
console.log(el);

источник

2016-09-02 17:30:30 jhummel

я думаю он ищет имя класса не с id –

@NalinAggarwal, это все равно будет работать с id или классом, нужно просто получить доступ к любому свойству из 'e.target' и проверить его на массив. Или просто проверяйте элемент против коллекции, сохраняя результат getElementsByClassName. Хотя пример должен показать, что вместо того, чтобы делать 'return e.target', поскольку это не имеет никакого смысла здесь, поскольку оно не возвращается ни к чему полезному. –

Точно. Я пытался показать, что очень неэффективно добавлять слушателей событий к каждому элементу. Что, если это вырастет, чтобы стать тысячами элементов или добавлены новые элементы через ajax и т. Д. – jhummel

На DOMContentLoaded Foreach элемент документа. getElementsByClassName ("clsname") добавить обработчик события:

window.addEventListener('DOMContentLoaded', function(e) { 
 
    Array.prototype.slice.call(document.getElementsByClassName("clsname")).forEach(function (element, index) { 
 
    element.addEventListener('click', function (e) { 
 
     console.log(this.id); 
 
    }); 
 
    }); 
 
})

<div id="one" class="clsname"> 111111111111</div> 
 
<div id="two" class="clsname"> 222222222222</div> 
 
<div id="three" class="clsname">333333333333</div> 
 
<div id="four" class="clsname"> 444444444444</div> 
 
<div id="five" class="clsname"> 555555555555</div> 
 
<div id="six" class="clsname"> 666666666666</div> 
 
<div id="seven" class="clsname">7777777777777</div>

источник

2016-09-02 17:34:31 gaetanoM

Похоже, у нас была такая же идея, но очень приятное использование foreach! – Li357

И если вы используете новейшую версию браузеров (за исключением браузеров IE11 и Android), вы можете использовать оператор спреда: '[... document.getElementsByClassName (« clsname »)]. ForEach' вместо хрустящего старого фрагмента;). –

JavaScript - Как получить элемент из массива после нажатия на него

ответ

Смежные вопросы