JavaScript警报无法与div标记一起正常工作

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>

var-boxArray=document.getElementsByClassName（“box”）；
对于（var i=0；i

但每次它都会提醒16
有什么问题吗？

---

你能帮我一下吗？

这与javascript的作用域有关<代码>i超出for循环的范围，因为您使用了

var

，因此当您执行

警报（i）

时，它会采用循环后留下的

i

值（因为循环已经运行）

将for循环更改为

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

for（变量i=0；i

到

for（设i=0；i

---

它应该可以解决您的问题。

这与javascript的作用域有关<代码>i超出for循环的范围，因为您使用了

var

，因此当您执行

警报（i）

时，它会采用循环后留下的

i

值（因为循环已经运行）

将for循环更改为

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

for（变量i=0；i

到

for（设i=0；i

它应该可以解决您的问题。

使用您可以编写的经典：

var-boxArray=document.getElementsByClassName（“box”）；
对于（var i=0；i

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

使用经典代码，您可以编写：

var-boxArray=document.getElementsByClassName（“box”）；
对于（var i=0；i

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16

如果使用jQuery的

.index（）

就这么简单：

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

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

});

---

演示：

如果使用jQuery的

.index（）

就这么简单：

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

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

});

---

演示：

您可以将

addEventListener

与本地声明的变量一起使用，如下所示

var-boxArray=document.getElementsByClassName（“box”）；
对于（var i=0；i

1.
2.
3.
4.
5.
6.
7.
8.

您可以将

addEventListener

与本地声明的变量一起使用，如下所示

var-boxArray=document.getElementsByClassName（“box”）；
对于（var i=0；i

1.
2.
3.
4.
5.
6.
7.
8.