Question

我正在开发一个电子应用程序，对于代码的这一特定部分，我需要恢复当前元素的索引（点击）。

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].checked = customConf[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));
}

它来了＆＃34;关闭＆＃34;，但当我点击第一个复选框时，我得到索引1，而在第二个复选框中我得到3。

请不要使用外部库，只需简单的JavaScript。

Answer 1

利用closures：

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 2

也许您可以将Object选择器转换为数组，然后您可以使用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 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

将modifierCheckboxed [i]传递给bindModifierCheckBoxes函数。所以你发送当前复选框的référence然后你可以用它做你想做的事。

Answer 7

您可以使用change代替click：

＆＃13;

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

＆＃13;

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

＆＃13;

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

7 个答案: