addEventListener内の反復は機能しません

Question

私は非常に単純なトグル機能を作成しました。 個々のidと6個のaタグを持つ6つのdivタグを持っています なぜ、私はループ変数を使って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; 
 
    } 
 

 
}