0

我有一个菜单类从收到的 json 文件中加载数据。

在构造函数中我构建了菜单，所以我有一个带有这个（提取部分）js的for循环：

for (var i = 0; i<data.length; i++)
    {
        var btn = $('<div>'+data[i].label+'</div>').appendTo(object.container);
        btn.click(function()
            {  
                if($('.blockingFrame').length == 0)//pas de blocking
                {
                    data[i].action()
                }
            });
    }

现在，显然这不起作用，因为在运行时 data[i] 不再存在...... data[i].action 包含一个有效的 js 函数。

这有效，但不包含条件..：

for (var i = 0; i<data.length; i++)
    {
        var btn = $('<div>'+data[i].label+'</div>').appendTo(object.container);
        btn.click(data[i].action);
    }

所以我想我可以将这个动作存储在 jquery 对象中并像这样调用它，但它不起作用：

for (var i = 0; i<data.length; i++)
    {
        var btn = $('<div>'+data[i].label+'</div>').appendTo(object.container);
        btn.action = data[i].action;
        btn.click(function()
            {  
                if($('.blockingFrame').length == 0)//pas de blocking
                {
                    $(this).action();
                }
            });
    }

我提出的一个部分解决方案是将动作存储在另一个事件中，如 dblclick，并在条件内触发 dblclick，但这看起来很丑陋。

知道怎么做吗？

4

2 回答 2

1

使用立即执行的函数来创建一个包含i.

for (var i = 0; i<data.length; i++) {
    var btn = $('<div>'+data[i].label+'</div>').appendTo(object.container);
    btn.click(function(i) {
        return function() {  
            if($('.blockingFrame').length == 0)//pas de blocking {
                data[i].action();
        }
    }(i));
}
于 2013-10-05T09:07:54.000 回答
1

for循环不能与闭包一起正常工作。考虑改用迭代器方法：

$.each(data, function(index, elem) {
    var btn = $('<div>'+elem.label+'</div>').appendTo(object.container);
    btn.click(function()
        {  
            if($('.blockingFrame').length == 0)//pas de blocking
            {
                elem.action()
            }
        });
}

迭代器通常比for循环更优雅、更紧凑，尤其是当您将它们嵌套时。

如果这是一个临时的 jquery 对象，那么您的最后一个片段不起作用的原因btn = $(...)是，一旦您离开范围，您分配给它的所有内容就会消失。当稍后click调用处理程序时，您将通过 创建一个新的 jquery 对象$(this)，该对象不会携带您在上一步中所做的更改。如果您想将任何数据永久附加到元素，请使用该data方法 - 但在这种情况下，不需要这样做。

于 2013-10-05T09:08:58.413 回答