Question

考虑以下代码：

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>
<script type="text/javascript">
    var prizes = ['Watch','A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
    for (var btnNum = 0; btnNum < prizes.length-1; btnNum++) {
        // for each of our buttons, when the user clicks it...
        document.getElementById('btn-' + btnNum).onclick = function() {
            // tell her what she's won!
            alert(prizes[btnNum]);
        };
    }
</script>

我希望它能够像点击不同的按钮一样工作，应该会出现不同的数组值。但它只提醒＆＃34; Fresh Laundry＆＃34;，无论点击哪个按钮。我不知道这里的问题是什么？为什么通过for循环分配的每个函数表达式都引用了prizes Array的最后一个元素？

Answer 1

当您单击btnNum的值时，将是所有点击事件处理程序的最后一个值。所以你的事件需要得到正确的价值。

您可以将事件监听器置于Immediately Invoked Function Expression内，并传递btnNum的值。

var prizes = ['Watch', 'A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
for (var btnNum = 0; btnNum < prizes.length - 1; btnNum++) {
  (function(el) {
    document.getElementById('btn-' + el).onclick = function() {
      alert(prizes[el]);
    };
  })(btnNum);
}

<button id="btn-0">Button 1!</button>
<button id="btn-1">Button 2!</button>
<button id="btn-2">Button 3!</button>
<button id="btn-3">Button 4!</button>

为什么单击不同的按钮会出现相同的数组值？

1 个答案: