addEventListener 中的迭代不起作用

Question

我创建了一个非常简单的切换函数。我有 6 个带有个人 ID 的div 标签和 6 个 a 标签为什么我不能使用循环变量来迭代 id？

<script>
    var open = false;
    var boxes = document.getElementsByClassName("boxlink");
    for (var i = 0; i < boxes.length; i++) {
          boxes[i].addEventListener("click", function () {
                    var b = document.getElementById("textbox" + i);
                    toggle(b);
                }
                , false);
    }
    function toggle(obj) {

        if (open == false) {
            obj.style.height = 'auto';
            open = true;
        }
        else {
            obj.style.height = '78px';
            open = false;
        }
    }

</script>

Answer 1

你必须在循环中创建一个闭包

// Code goes here
var open = false;
var boxes = document.getElementsByClassName("boxlink");
for (var i = 0; i < boxes.length; i++) {
  var onClickFunction = (function(i) {
    return function() {
      var b = document.getElementById("textbox" + i);
      toggle(b);
    }
  })(i);
boxes[i].addEventListener("click",onClickFunction , false);
}
function toggle(obj) {
  if (open == false) {
    obj.style.height = 'auto';
    open = true;
  } else {
    obj.style.height = '78px';
    open = false;
  }
}