javascript - 将循环中的计数器分配给变量不会保留其当前值

<分区>

我不明白下面的行为。

我希望下面的脚本执行以下操作:

获取类为'button'的所有元素
为每个带有按钮的元素分配一个 onclick 事件
当用户点击一个按钮时，在分配 onclick 时会出现一个带有当前值 i 的警报。

所以我希望点击“按钮 1”会提示“我是按钮 1”。

相反，所有 3 个按钮都提示“我是按钮 3”。看起来 i 计数器的值没有被保留。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>
        <p class="button">Button 0</p>
        <p class="button">Button 1</p>
        <p class="button">Button 2</p>
        <script>
            var buttons = document.getElementsByClassName('button');
            for (var i=0 ; i < buttons.length ; i++){
                buttons[i].onclick = function(){
                    alert("I am button " + i);
                };
            }

        </script>
    </body>
</html>

为什么会这样？我怎样才能达到预期的行为？

最佳答案

试试这个。它叫做Closures .它捕获变量 i 并且因为 i 在循环后没有被删除，所以它使用 i 的当前值调用事件处理程序。所以你需要一个局部变量，你可以通过执行函数来获取它。所以我创建了一个函数，将变量 i 传递给他，并且在函数范围内我有一个函数局部变量 param，这是每次迭代的新变量。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
    </head>
    <body>
        <p class="button">Button 0</p>
        <p class="button">Button 1</p>
        <p class="button">Button 2</p>
        <script>
            var buttons = document.getElementsByClassName('button');
            for (var i=0 ; i < buttons.length ; i++){
                buttons[i].onclick = (function(param){
                    return function(){
                    alert("I am button " + param);
                      };
                })(i);
            }

        </script>
    </body>
</html>

或者你可以使用 ES6 feature let

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" />
            <title>Test</title>
        </head>
        <body>
            <p class="button">Button 0</p>
            <p class="button">Button 1</p>
            <p class="button">Button 2</p>
            <script>
                var buttons = document.getElementsByClassName('button');
                for (let i = 0 ; i < buttons.length ; i++){
                    buttons[i].onclick = function(){
                        alert("I am button " + i);
                     }
                }

            </script>
        </body>
    </html>

关于javascript - 将循环中的计数器分配给变量不会保留其当前值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40134043/

上一篇：javascript - Angular ng-show 不适用于 Controller

下一篇：javascript - 我可以将变量设置为对象的多部分属性吗？

c# - 呈现工作流程的控制

javascript - 将对象转换为包含对象作为元素 0 的数组

javascript - 如何设置事件的 css 选项卡菜单？

javascript - Chrome 扩展 DOM 已完全加载

javascript - JSF 页面加载缓慢

javascript - 为什么从我的 jQuery.getJSON() 方法调用失败方法？

javascript - 使用指令或 ng-click 更改 AngularJS 中的预览

javascript - 用方括号包裹单词而不是 sglQuotedString 或 dblQuotedString

javascript - 使用 jQuery 的下拉菜单