Javascript数组遍历覆盖键值答案

【问题标题】：Javascript array traversal overwriting key valuesJavascript数组遍历覆盖键值
【发布时间】：2010-07-23 09:01:09
【问题描述】：

我创建了一个哈希图来控制按钮的事件。是这样定义的：

var Signage_Manager = {

init: function() {

    Signage_Manager.buttonActions.set_events();

},
buttonActions: {
    buttons: {

        '#add_product': {action: 'navigate', href: '/manager/add_product'},
        '.back_to_dashboard': {action: 'navigate', href: '/manager/dashboard'}

    },
    set_events: function() {
        for(var button in Signage_Manager.buttonActions.buttons){   
            if(Signage_Manager.buttonActions.buttons[button].action == 'navigate') {
                $(button).live('click', function() {
                    console.log(Signage_Manager.buttonActions.buttons[button].href);                                                 
                });
            }
            else {
                $(button).live('click', function() {
                    //
                    console.log('not navigate');                                                     
                });
            }
        }
    }
}
};

问题是当我单击“add_product”按钮时，它会尝试使用 href '/manager/dashboard'，而不是定义行中的 '/manager/add_product' 字符串。

有人可以帮忙吗？

【问题讨论】：

你能附上一个示例html吗？

标签： javascript jquery arrays object traversal

【解决方案1】：

由于 closure，您的实时函数将关闭相同按钮变量，该变量在每次迭代中都会发生变化。因此最后所有事件处理程序都将使用相同的按钮：最后一个。为了保留按钮名称，您可以为事件处理程序创建一个内部范围，以确保每个函数都有其自己的 jQuery 选择器。

if (Signage_Manager.buttonActions.buttons[button].action == 'navigate') {
  (function(button) {
    $(button).live('click', function () {
      console.log(Signage_Manager.buttonActions.buttons[button].href);
    });
  })(button);
}

【讨论】：

【解决方案2】：

在live() 调用中，您可以引用外部作用域的button 变量。当您单击按钮并执行匿名函数时，循环已经完成，因此按钮等于哈希表的最后一个元素。您必须为每个按钮存储哈希表元素。

使用 data() 方法的可能解决方案是：

$(button).data("button", Signage_Manager.buttonActions.buttons[button]).live('click', function() {
    console.log($(this).data("button").href);                            
});

【讨论】：