Что можно получить с помощью элемента с числовыми щелчками

Question

У меня есть несколько элементов с одинаковыми именами классов.

Как я могу получить число элементов, которые я нажал с помощью событий onclick?

Например:

var x = document.getElementsByClassName("myclass").length; 

for (a=0; a<=x; a++) 
{ 
    // here i want get number of clicked myclass 
} 

Answer 1

Вы можете захватить информацию о щелкнутом элементе в обработчик события OnClick.

Независимо от того, какая функция запускается при его нажатии, событие будет передано событием в качестве первого параметра. Этот объект события имеет цель, которая будет ссылкой на конкретный элемент, который был нажат.

function clickHandler(event) { 
    console.log(event.target); 
} 

Answer 2

Вы можете использовать indexOf на массив document.getElementsByClassName("myclass"). Вы можете использовать Array.from или [].slice.call, чтобы сделать массив.

Если предположить, что ваши click обработчики выглядеть ниже фрагмент кода, и они «Сделайте что-нибудь e.target» где e.target является элементом, который была нажата, вы можете проверить indexOfe.target на массиве, как это:

document.addEventListener("click", function(e) { 
 
    if (e.target.classList.contains("myclass")) { 
 
    /* 
 
     The above part could as well look like 
 
     div1.onclick = function(e){…}; 
 
     div2.onclick = function(e){…}; 
 
     … 
 
    */ 
 
    console.log("Do something to %o", e.target); 
 
    console.log("Index of clicked element: %d", Array.from(document.getElementsByClassName("myclass")).indexOf(e.target)); 
 
    } 
 
});

<div> 
 
    <div class="myclass">A0</div> 
 
    <div>B1</div> 
 
    <div class="myclass">A2</div> 
 
</div> 
 
<div> 
 
    <div>B3</div> 
 
    <div class="myclass">A4</div> 
 
</div> 
 
<div class="myclass">A5</div> 
 
<div class="myclass">A6</div> 
 
<div>B7</div> 
 
<div class="myclass">A8</div>

Если вы хотите, чтобы индекс элемента в пределах того же родительского элемента, вы можете вместо этого использовать:

Array.from(e.target.parentNode.children).indexOf(e.target) 

Если вы хотите ограничить выше элементам с myclass класса, вы можете использовать что-то вроде:

Array.from(e.target.parentNode.getElementsByClassName("myclass")).indexOf(e.target) 

Или для прямых детей:

Array.from(e.target.parentNode.children).filter(function(elem){ 
    return elem.classList.contains("myclass"); 
}).indexOf(e.target)