通过For循环选择和添加函数到Div的

我想快速选择div，所以我写了一个for循环，选择所有的div并快速添加函数给他们，而不是“onClick ='blahblah'”方法。这里是我的代码：通过For循环选择和添加函数到Div的

<!DOCTYPE html> 
<html> 
<head> 
    <title>Strategy Game Dev Test</title> 
    <meta charset="utf-8" /> 
    <script type="text/javascript"> 
     function illu_area(){ 
     alert("test"); 
     } 
     function everything(){ 
      for(var test_id = 0; test_id < 7; test_id++){ 
      document.getElementById("t"+test_id).addEventListener("click", illu_area()); 

      } 
     } 
    </script> 
    <style type="text/css"> 
     * { margin: 0px; padding: 0px; font-family: Tahoma} 
     .container_main { 
      margin: 10px; 
      width: 300px; 
      height: 300px; 
      background-color: red; 
      position: relative; 
     } 
     .territory_type1 { 
      width: 100px; 
      height: 100px; 
      position: absolute; 
     } 
     .territory_type2_horizontal { 
      width: 200px; 
      height: 100px; 
      position: absolute; 
     } 
     .territory_type2_vertical { 
      width: 100px; 
      height: 200px; 
      position: absolute; 
     } 
     #t6 { 
      background-color: blue; 
      left: 200px; 
     } 
     #t5 { 
      background-color: lightblue; 
      left: 100px; 
     } 
     #t4 { 
      background-color: green; 
     } 
     #t3 { 
      background-color: turquoise; 
      top: 200px; 
     } 
     #t2 { 
      background-color: lightgreen; 
      top: 200px; 
      left: 200px; 
     } 
     #t1 { 
      background-color: brown; 
      top: 100px; 
      left: 200px; 
     } 
     #t0 { 
      background-color: yellow; 
      top: 100px; 
      left: 100px; 
     } 
     .grid { 
      height: 100px; 
      width: 100px; 
      position: absolute; 
      top :0px; 
     } 
     #t3_g2 { 
      left: 100px; 
     } 
     #t4_g2 { 
      top: 100px; 
     } 
    </style> 
</head> 
<body onLoad="everything()"> 
    <div class="container_main"> 
     <div id="t0" class="territory_type1" data-xcoor="0" data-ycoor="0"> 
      Origin 
     </div> 
     <div id="t1" class="territory_type1" data-xcoor="1" data-ycoor="0"> 
      1 
     </div> 
     <div id="t2" class="territory_type1" data-xcoor="1" data-ycoor="-1"> 
      2 
     </div> 
     <div id="t3" class="territory_type2_horizontal"> 
      3 
      <div class="grid" id="t3_g1" data-xcoor="-1" data-ycoor="-1"></div> 
      <div class="grid" id="t3_g2" data-xcoor="0" data-ycoor="-1"></div> 
     </div> 
     <div id="t4" class="territory_type2_vertical"> 
      4 
      <div class="grid" id="t4_g1" data-xcoor="-1" data-ycoor="1"></div> 
      <div class="grid" id="t4_g2" data-xcoor="-1" data-ycoor="0"></div> 
     </div> 
     <div id="t5" class="territory_type1" data-xcoor="0" data-ycoor="1"> 
      5 
     </div> 
     <div id="t6" class="territory_type1" data-xcoor="1" data-ycoor="1"> 
      6 
     </div> 
    </div> 
</body> 
</html>

我的问题是：当我打开这个HTML文件或刷新页面，显示警报消息（六次）马上。我希望它提醒当我点击一个网格...

注：

它，当我这样做的工作：

function everything(){ 
      for(var test_id = 0; test_id < 7; test_id++){ 
      document.getElementById("t"+test_id).addEventListener("click", function(){alert("test");}); 

} 
}

但这个心不是会成为我觉得在未来有用的：P

帮帮我！

来源

2014-10-03 user2998004

你要通过你的函数 - 省略()

.addEventListener("click", illu_area);

具有()立即执行功能。

来源

2014-10-03 19:04:17 tymeJV

谢谢。也感谢信息 – user2998004 2014-10-03 19:17:53

嗯，我有一个类似的问题。如果我想添加像这样的参数该怎么办？ document.getElementById（“t”+ test_id）.addEventListener（“click”，illu_area（test_id））; – user2998004 2014-10-03 19:26:24

使用匿名函数并在该函数内部调用函数（）{illu_area（test_id）}' – tymeJV 2014-10-03 19:27:36

通过For循环选择和添加函数到Div的

回答

相关问题