使用div标记时，JavaScript警报无法正常工作

There are 16 boxes in html.

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>

I want to write js code that will do following:
When I click on any box, it will alert it's order number from 1 to 16.
There is my js code below:

我想编写将执行以下操作的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>

But every time it alerts 16.
What is the problem?
Could you help me, please?

但每次它发出警报16.问题是什么?请问你能帮帮我吗?

4 个解决方案

#1

Using the classical IIFE: Immediately Invoked Function Expression you can write:

使用经典IIFE:立即调用函数表达式,您可以编写:

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>

#2

This has to do with javascript's scope. i is outside the scope of the for loop because you used var, so when you do alert(i), it takes the value that i is left with after the loop (since the loop has already run).

这与javascript的范围有关。我不在for循环的范围内,因为你使用了var,所以当你做alert(i)时,它会获取循环后留下的值(因为循环已经运行)。

Change your for loop from

改变你的for循环

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

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

And it should fix your problem.

它应该解决你的问题。

#3

You can use addEventListener with a local declared variable, like this

您可以将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>

#4

You can do this so much simpler if you use jQuery's .index()

如果你使用jQuery的.index(),你可以这么简单

It's as simple as doing this:

它就像这样简单:

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

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

});

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

#1