Question

检测班级名称很简单。

event.target.className

然而，检测给定元素是否是使用特定类的第3，第5或第11个是困难的，至少对我而言。我用控制台（F12）找到了我可以使用但没有运气的属性。

在以下简化示例中，哪个属性或其他功能可以确定用户是否点击了("box-a")[0] ("box-a")[1] ("box-a")[2]或("box-a")[3]？我知道我可以为每个元素使用单独的ID，但如果技术上可行，我宁愿保持这个简单。

var count;
	
for (count = 0; count < 4; count++) {
  document.getElementsByClassName("box-a")[count].addEventListener("click", checker);
}

function checker() {
  document.getElementsByClassName("box-b")[0].innerHTML = event.target.className;
}

// event.target.className targets the classes name, but what property targets the [0], [1], [2] or [3]?

.box-a {
  background-color: green;
  border: 0.6rem solid black;
  padding: 10px;
  font-family: arial;
  font-size: 4rem;
}

.box-b {
  display: block;
  background-color: blue;
  border: .25rem solid red;
  padding: 10px;
  font-family: arial;
  font-size: 4rem;
}

<div class="box-a">Box 1</div>
<div class="box-a">Box 2</div>
<div class="box-a">Box 3</div>
<div class="box-a">Box 4</div>
<div class="box-b"></div>

Answer 1

循环遍历元素时，为每个将所点击框的索引传递给checker函数的框添加一个事件监听器。

function checker(index) {
    // Do whatever you want with the index here
    console.log(index)
}

// Add the same event listener to each element, but passing the index of
// the element to the checker function
[].slice.call(document.getElementsByClassName('box-a'))
    .forEach(function(element, index) {
        element.addEventListener('click', function() { checker(index) })
    })

<div class="box-a">Box 1</div>
<div class="box-a">Box 2</div>
<div class="box-a">Box 3</div>
<div class="box-a">Box 4</div>
<div class="box-a">Box 5</div>

Answer 2

这可能不是最佳解决方案，但可行。

// Click on any div element and see the output

document.querySelectorAll('.box-a').forEach((e) => { // Add the event listener to all the elements with class .box-a
  e.addEventListener('click', (event) => {
    var element = event.target;
    var index = Array.from(element 
      .parentNode // Get the parent node of the clicked element
      .querySelectorAll('.' + element.className)) // Select all the elements inside the parent node (siblings) with the same class name of the clicked element
      .indexOf(element) + 1; // Look for the index of the clicked element, + 1 
    console.log(index);
  });
});

这是一个工作箱：

JSBin

如何检测类元素的有序位置

2 个答案: