addEventListener 내의 반복이 작동하지 않습니다.

Question

아주 간단한 토글 기능을 만들었습니다. 개별 ID가 6 개이고 태그가 6 개임 왜 루프 변수를 사용하여 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; 
 
    } 
 

 
}