如何使用JavaScript获取点击事件中数组元素的索引

Question

我正在开发一个 Electron 应用程序，对于代码的这个特定部分，我有必要恢复当前元素的索引（单击时）。

HTML：

<div>
    <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds
    <input type="checkbox" class="optionBox"> Always check day transition
</div>

JavaScript：

modifierCheckboxes = document.querySelectorAll('.optionBox');

for (var i = 0; i < modifierCheckboxes.length; i++) {
    modifierCheckboxes[i].addEventListener('click', function (e) {
        bindModifierCheckBoxes(e);
    });
}

function bindModifierCheckBoxes(e) {
    // I need the reference for modifierCheckboxes[i] here 
}

我试过这个：

function bindModifierCheckBoxes(e){
    var t=e.target;
    console.log(Array.prototype.indexOf.call(t.parentNode.childNodes,t));
}

它“关闭”了，但是当我单击第一个复选框时，我得到的索引为 1，而在第二个复选框中我得到的索引为 3。

请不要使用外部库，只需纯 JavaScript。

Answer 1

也许你可以将对象选择器转换为数组，然后你可以使用indexOf。

var checks = document.querySelectorAll('.optionBox');

checks.forEach(function(check){
  check.addEventListener('click', checkIndex);
})

function checkIndex(event){
  console.log( Array.from(checks).indexOf(event.target) );
}

Answer 2

利用闭包：

modifierCheckboxes = document.querySelectorAll('.optionBox');

modifierCheckboxes.forEach(function(checkbox, i) {
    checkbox.checked = customConf[i];;
    checkbox.addEventListener('click', function (e) {
        bindModifierCheckBoxes(e, i);
    });
});

function bindModifierCheckBoxes(e, index) {
    // index is passed inside the event listener function
}

Answer 3

使用

.children

而不是

.childNodes

...

.children

给出不包括文本节点的子元素列表

在 HTML 中，当您很好地格式化源代码时，

>

和

<

之间的文本节点（通常）不会影响页面的渲染

Answer 4

function bindModifierCheckBoxes(e) {
    var t=e.target;
    var checkboxes = t.parentNode.getElementsByClassName('optionBox');
    console.log(Array.prototype.indexOf.call(checkboxes, t) + 1);
}

这是一个小提琴： https://jsfiddle.net/7p3gsy75/

Answer 5

另一种选择是给你的复选框 ID（这里我选择了蹩脚的）：

<div>
  <input type="checkbox" id="cb1" class="optionBox"> Minimize to tray after 10 seconds
  <input type="checkbox" id="cb2" class="optionBox"> Always check day transition
</div>

然后看

e.target.id

Answer 6

您可以使用

change

代替

click

:

$('.optionBox').on('change', function() {
    $(this).each(function() {
        if (this.checked) {
            alert($(this).index());
        } else {
            alert("unchecked");
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
      <input type="checkbox" class="optionBox"> Minimize to tray after 10 seconds
      <input type="checkbox" class="optionBox"> Always check day transition
  </div>

Answer 7

将modifierCheckboxed[i]传递给您的bindModifierCheckBoxes函数。 因此，您发送当前复选框的参考，然后您可以用它做您想做的事情。

Answer 8

let boxes = document.querySelectorAll('.optionBox');

for(var i=0; i < boxes.length; i++){   
boxes[i].id= i;    
boxes.addEventListener("click", checkId); 
}


function checkId(evt){    
console.log(evt.currentTarget.id);   
} 

您可以将变量附加到每个数组元素并使用事件参数获取它 evt.currentTarget.myVariable