JavaScript警告無法正確使用div標記

Question

html中有16個框。

<div id="box-container"> 
    <div class="box" data-coord="0:0" style="clear: left"></div> <div class="box" data-coord="0:1"></div> <div class="box" data-coord="0:2"></div> <div class="box" data-coord="0:3"></div> 
    <div class="box" data-coord="1:0" style="clear: left"></div> <div class="box" data-coord="1:1"></div> <div class="box" data-coord="1:2"></div> <div class="box" data-coord="1:3"></div> 
    <div class="box" data-coord="2:0" style="clear: left"></div> <div class="box" data-coord="2:1"></div> <div class="box" data-coord="2:2"></div> <div class="box" data-coord="2:3"></div> 
    <div class="box" data-coord="3:0" style="clear: left"></div> <div class="box" data-coord="3:1"></div> <div class="box" data-coord="3:2"></div> <div class="box" data-coord="3:3"></div> 
</div> 

我想寫的js代碼，將做到以下幾點：
當我點擊任何一個框，它會提醒這是從1到16
下面有我的js代碼訂單號：

<script type="text/javascript"> 
    var boxArray = document.getElementsByClassName("box"); 
    for (var i = 0; i < boxArray.length; i++) { 
     boxArray[i].onclick = function() { 
      var say = function (i) { 
       alert(i); 
      }; 
      say(i); 
     } 
    } 
</script> 

但每次都會發出警報。
問題是什麼？
你能幫我嗎？

Answer 1

這與JavaScript的範圍有關。 i超出了for循環的範圍，因爲您使用了var，因此當您執行alert(i)時，需要在循環之後留下值i（因爲循環已經運行）。

從

for (var i = 0; i < boxArray.length; i++) 

更改您的for循環

for (let i = 0; i < boxArray.length; i++) 

它應該解決您的問題。

Answer 2

利用經典IIFE: Immediately Invoked Function Expression你可以寫：

var boxArray = document.getElementsByClassName("box"); 
 
for (var i = 0; i < boxArray.length; i++) { 
 
    boxArray[i].onclick = (function (i) { 
 
    return function (e) { 
 
     var say = function (i) { 
 
     alert(i); 
 
     }; 
 
     say(i); 
 
    }; 
 
    })(i); 
 
}

<div id="box-container"> 
 
    <div class="box" data-coord="0:0" style="clear: left">1</div> <div class="box" data-coord="0:1">2</div> <div class="box" data-coord="0:2">3</div> <div class="box" data-coord="0:3">4</div> 
 
    <div class="box" data-coord="1:0" style="clear: left">5</div> <div class="box" data-coord="1:1">6</div> <div class="box" data-coord="1:2">7</div> <div class="box" data-coord="1:3">8</div> 
 
    <div class="box" data-coord="2:0" style="clear: left">9</div> <div class="box" data-coord="2:1">10</div> <div class="box" data-coord="2:2">11</div> <div class="box" data-coord="2:3">12</div> 
 
    <div class="box" data-coord="3:0" style="clear: left">13</div> <div class="box" data-coord="3:1">14</div> <div class="box" data-coord="3:2">15</div> <div class="box" data-coord="3:3">16</div> 
 
</div>

Answer 3

，如果你使用你可以這樣做，所以更加簡單jQuery的.index()

這是因爲這樣做簡單：

$(".box").click(function(){ 

    var i = $(this).index();  
    alert(i); 

}); 

DEMO：http://jsbin.com/zoxirafufo/edit?html,js,console,output

Answer 4

可以使用addEventListener與本地聲明的變量，這樣

var boxArray = document.getElementsByClassName("box"); 
 
for (var i = 0; i < boxArray.length; i++) { 
 
    boxArray[i].addEventListener('click', (function(e) { 
 
    var num = i; 
 
    return function() { 
 
     alert(num); 
 
    } 
 
    })()); 
 
}

<div id="box-container"> 
 
    <div class="box" data-coord="0:0" style="clear: left">1</div> 
 
    <div class="box" data-coord="0:1">2</div> 
 
    <div class="box" data-coord="0:2">3</div> 
 
    <div class="box" data-coord="0:3">4</div> 
 
    <div class="box" data-coord="1:0" style="clear: left">5</div> 
 
    <div class="box" data-coord="1:1">6</div> 
 
    <div class="box" data-coord="1:2">7</div> 
 
    <div class="box" data-coord="1:3">8</div> 
 
</div>