addEventListener里面的迭代不起作用

Question

我创建了一个非常简单的切换功能。 我有6个div-Tags，有个人id和6个a-Tags 为什么我不能使用循环变量迭代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;
  }

}