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>

但每次提醒 16 有什么问题？
你能帮帮我吗？

Answer 1

使用经典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 2

这与javascript的范围有关。 i超出了for循环的范围，因为您使用了var，所以当您执行alert(i)时，它会获取循环后留下i的值（因为循环已经运行了。）

从

更改for循环

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

到

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

它应该解决你的问题。

Answer 3

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

Answer 4

如果你使用jQuery＆＃39; s .index()

，你可以这么简单

这就像这样简单：

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

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

});

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

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

4 个答案: