javascript - 将js函数保留在jquery对象中

Question

我有一个菜单类，从接收到的 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，但这看起来很难看。

知道如何做到这一点吗？

Answer 1

for 循环 don't work properly with closures 。考虑使用迭代器方法:

$.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 循环更加优雅和紧凑，尤其是当您嵌套它们时。

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