Question

我有一些具有相同类名的元素。

如何获取我使用onclick个事件点击的元素数量？

例如：

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

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

Answer 1

您可以在indexOf数组上使用document.getElementsByClassName("myclass")。您可以使用Array.from或[].slice.call制作数组。

假设您的click处理程序在下面的代码段中显示，并且“对e.target执行某些操作”其中e.target是已单击的元素，您可以像这样检查数组上的indexOf e.target：

＆＃13;

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));
  }
});

＆＃13;

<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>

＆＃13;

如果您希望元素的索引在同一个父元素中，您可以使用：

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)

Answer 2

您可以在onClick事件处理程序中捕获有关被点击元素的信息。

当点击事件发生时运行的任何函数将作为第一个参数传递一个事件。该事件对象有一个目标，该目标将是对单击的特定元素的引用。

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

我可以获得点击元素的数量

2 个答案: