用静态值打印循环元素

Question

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

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

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

这里是一个示例代码：

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

Answer 1

，由于点击活动将在每次迭代附着，避免你可以给他们一个共同的类（common为例）然后装上点击这一类，如：

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()); 
 
});

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

希望这有助于。

Answer 2

你可以做到这一点通过以下两种方式：

1. 只需用ES6的let而不是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); 
 
}

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