Question

在这个例子中，我创建了三个按钮“一个”两个“三个”。点击后，我希望他们提醒他们的号码：

<html>
    <head>
        <script type="application/javascript" src="jquery.js"></script>
        <script type="application/javascript">
            $(document).ready(function() {
                var numbers = ['one', 'two', 'three'];
                for (i in numbers) {
                    var nr = numbers[i];
                    var li = $('<li>' + nr + '</li>');
                    li.click(function() {
                        var newVariable = String(nr);
                        alert(i); // 2
                        alert(nr); // three
                        alert(newVariable); // three
                        alert(li.html()); // three
                    });
                    $('ul').append(li);
                }
            });
        </script>
    </head>
    <body>
        <ul>
        </ul>
    </body>
</html>

问题是，当点击其中任何一个时，会使用循环变量的最后一个值，即警告框总是显示“三个”。

在JavaScript中，for-loops中的变量在C语言意义上似乎是“静态的”。 是否有某种方法可以为每个点击功能创建单独的变量，即不使用相同的参考？

谢谢！

编辑：

解决方案是使用jQuery.data将任意数据与每个元素相关联：

<html>
    <head>
        <script type="application/javascript" src="jquery.js"></script>
        <script type="application/javascript">
            $(document).ready(function() {
                var numbers = ['one', 'two', 'three'];
                for (i in numbers) {
                    var nr = numbers[i];
                    var li = $('<li>' + nr + '</li>');
                    li.data('nr', nr);
                    li.click(function() {
                        alert($(this).data('nr'));
                    });
                    $('ul').append(li);
                }
            });
        </script>
    </head>
    <body>
        <ul>
        </ul>
    </body>
</html>

Answer 1

或者，在for循环中放置一个闭包。

        $(document).ready(function() {
            var numbers = ['one', 'two', 'three'];
            for (i in numbers) {
                (function () {
                var nr = numbers[i];
                var li = $('<li>' + nr + '</li>');

                li.click(function() {
                    var newVariable = String(nr);
                    alert(i); // 2
                    alert(nr); // three
                    alert(newVariable); // three
                    alert(li.html()); // three
                });

                $('ul').append(li);

                }());
            }
        });

使用for in迭代数组也是不好的做法。它应该严格用于迭代对象字段。请改用for(;;;)。

Answer 2

您需要在元素或http://api.jquery.com/jQuery.data/上附加任何数据，以便稍后重复使用。

e.g

...
var li = $('<li>' + nr + '</li>');
jQuery.data(li, "the-value", foo);
li.click(function() {
    var foo = jQuery.data(li, "the-value");
    ...
}

Answer 3

这是正常工作，你要求click事件使用这些变量（不是绝对值），并且在调用方法时，变量处于'max'值。

尝试使用title属性存储要返回的值，即：

var li = $('<li title="' + nr + '">' + nr + '</li>');

然后您的提醒将是：

alert(this.attr('title'));

未经测试，但这应该有效或至少让您走上正确的轨道。

for循环中的粘滞/静态变量引用

编辑：

3 个答案: