Question

我正在使用JavaScript和jQuery，我想显示一堆按钮。

这些按钮从循环中递增的变量中获取名称，它们应显示此数字。

命名过程工作正常，但是当我点击这些按钮时，我每次都得到值10.我知道这个输出的原因，但我不知道如何获得按钮的实际数量（我不知道）我不想从按钮名称中获取值。有没有办法让'click'值'静态'？

以下是一个示例代码：

<script>
for(var i = 0; i < 10; i++) {
  $(document.createElement('button'))
    .html(i)
    .click(function() {
        alert(i);
    })
    .appendTo($(document.body));
}
</script>

Answer 1

因为click事件将在每次迭代中附加，以避免您可以为它们提供一个公共类（例如common），然后将点击附加到此类，如：

＆＃13;

for(var i = 0; i < 10; i++) {
  $(document.createElement('button'))
    .addClass('common')
    .html(i)
    .appendTo($(document.body));
}


$('body').on('click', '.common', function(e) {
  console.log( $(this).text() );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

希望这有帮助。

Answer 2

您可以通过以下两种方式实现这一目标：

只需在ES6圈内使用let的{{1}}代替var。

for

for(let i = 0; i < 10; i++) {
  $(document.createElement('button'))
    .html(i)
    .click(function() {
        alert(i);
    })
    .appendTo($(document.body));
}

在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>循环内使用IIFE（立即调用函数表达式），如下所示：

for

for(var i = 0; i < 10; i++) {
  (function(j){$(document.createElement('button'))
    .html(j)
    .click(function() {
        alert(j);
    })
    .appendTo($(document.body));
  })(i);
}

使用静态值在循环中打印元素

2 个答案: