Question

如果您使用“ let i”尝试此代码，则不起作用，而使用“ var i”尝试此代码，则不起作用。

你能解释一下为什么吗？

$(document).ready(function () {
    for (let i=0; i<20; i++) {
        $('<button />').append(i).appendTo('body').click(function() {
            console.log(i);
        });
    }
});

Answer 1

var将在传递给ready方法的匿名函数的范围内声明它，这意味着匿名函数范围中只能有一个i，因此您将遇到此问题，最后一个显示为我更新的数字！当您使用let进行定义时，其范围仅限于其定义的块，即for loop，因此可以正常工作。希望这对您有帮助！

有关更多信息，请访问here

$(document).ready(function () {
    for (let i=0; i<20; i++) {
        $('<button />').append(i).appendTo('body').click(function() {
            console.log(i);
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

您是否尝试过使用.on（'click'，function（）{}）？

$(document).ready(function () {
    for (let i=0; i<20; i++) {
        let button = $('<button />').append(i);
        button.appendTo('body');
        button.on('click', function() {
            console.log(i);
        });
    }
});

我认为在单击点击动作监听器之前，该按钮必须首先存在

单击回调会丢失上下文，具体取决于var或let

2 个答案: