js querySelectorAll примеры автоматизации назначения событий click на элементы id
Компьютеры / Программирование / javascript (джаваскрипт)
Тэги: javascript javascript querySelectorAll
Тэги: javascript javascript querySelectorAll
📅23-11-2023 👁38
Допустим есть несколько блоков с разными дивами
и нужно назначить событие click для каждого дива, и каждый див отдельно обрабатывать в зависимости от его id.
<div id="x1" class="test" style="width: 100px; height: 100px">
text1
</div>
<div id="x2" class="test" style="width: 120px; height: 120px">
text1
</div>
<div id="x3" class="test" style="width: 130px; height: 130px">
text1
</div>и нужно назначить событие click для каждого дива, и каждый див отдельно обрабатывать в зависимости от его id.
Чтобы обработать событие клик для каждого дива, можно сделать так:
Либо короткий вариант кода с помощью querySelectorAll:
перебираем все элементы в html коде где есть класс с именем test и присываем к этим элементам событие клик мыши с вызовом функции test
if(document.getElementById('x1'))x1.onclick=test;
if(document.getElementById('x2'))x2.onclick=test;
if(document.getElementById('x3'))x3.onclick=test;
function test(e){ console.log (e); console.log (this.id); }Либо короткий вариант кода с помощью querySelectorAll:
document.querySelectorAll('.test').forEach (
function(item,i){
document.getElementById(item.attributes[0].value).onclick = test;
});перебираем все элементы в html коде где есть класс с именем test и присываем к этим элементам событие клик мыши с вызовом функции test
Оставить свой ответ:
