JavaScript和循环

Question

事件

可能重复：
Javascript only sets attribute for last item in array

我刚刚潜入一些基本的JavaScript + DOM学习，不是很明白只有最后一个元素正在切换？我对于为什么附加一个事件到一个元素感到迷失，似乎也覆盖了以前的事件。

的JavaScript：

window.onload = function() { 
    // Simple log 
    var c = function(x) { 
     return console.log(x); 
    }; 

    var hasClass = function(ele, cls) { 
     return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
    }; 

    var toggleClass = function(ele, cls) { 
     if (!hasClass(ele, cls)) { 
      ele.className += " " + cls; 


     } else { 
      var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
      ele.className = ele.className.replace(reg, ''); 
     } 
    }; 

    var toggle = function(clk) { 
     c(clk); 
    } 

    var el = document.getElementsByClassName('time'); 
    for (i = 0; i < el.length; i++) { 
     var btnToggle = el[i].getElementsByClassName('btn-toggle')[0]; 
     var clk = el[i].getElementsByClassName('clock')[0]; 
     btnToggle.addEventListener('click', function() { 
      toggle(clk) 
     }, false); 
    } 
};​ 

HTML：

<section> 
    <div class="time"> 
     <a href="#" class="btn-toggle">Show the time</a> 
     <div class="clock">Clock1</div> 
    </div> 

    <div class="time"> 
     <a href="#" class="btn-toggle">Show the time</a> 
     <div class="clock">Clock2</div> 
    </div> 

    <div class="time"> 
     <a href="#" class="btn-toggle">Show the time</a> 
     <div class="clock">Clock3</div> 
    </div> 

</section> 

感谢您明智的建议！

Answer 1

您需要添加一个闭合：

for (i=0;i<el.length;i++) { 
    var btnToggle = el[i].getElementsByClassName('btn-toggle')[0]; 
    var clk = el[i].getElementsByClassName('clock')[0]; 
    (function(){ 
     var x = clk; 
     btnToggle.addEventListener('click', function(){toggle(x)}, false); 
    })(); 
} 

这样，每次迭代有一个“私人”的范围，而clk没有被覆盖。