javascript - 在对象常量内调用jQuery切换方法

我正在努力使以下代码正常工作。问题是，当我将两个函数包装在括号editItems内的()属性中时，代码的行为异常，并将display: none内联css属性分配给编辑按钮。

如果我不在括号内包装这两个函数，则会收到JavaScript语法错误function statement requires a name。

var shoppingList = {
    // Some code ...

    'init' : function() {


    // Capture toggle event on Edit Items button
    (shoppingList.$editButton).toggle(shoppingList.editItems);
    },


    'editItems' : function() {
        (function() {
            $(this).attr('value', 'Finish editing');
            (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            });
        }), (function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        })
    }
}

$(document).ready(shoppingList.init);

但是，如果我像这样“直接”调用toggle事件，它将起作用：

var shoppingList = {
    // Some code ...

    'init' : function() {
        // Toggle event on Edit Items button
        (shoppingList.$editButton).toggle(
            function() {
            $(this).attr('value', 'Finish editing');
            (shoppingList.$ingrLinks).unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            });
        }, function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        });
    }
};

$(document).ready(shoppingList.init);

有没有一种方法可以将toggle事件存储在editItems对象文字中，并使它仍然按预期工作？

最佳答案

editItems函数看起来真的很奇怪。我想您只需要定义2个函数：startEdit和endEdit。并使用toggle将它们绑定到偶数和奇数点击。

 var shoppingList = {
    // Some code ...

    init : function() {
        // Bind on edit button click
        this.$editButton.toggle(this.startEdit, this.endEdit);
    },


    startEdit : function() {
            $(this).attr('value', 'Finish editing');
            shoppingList.$ingrLinks.unbind('click', shoppingList.ingredients) // disable highlighting items
                                     .removeAttr('href');
            $('.editme').editable("enable");
            $('.editme').editable('http://localhost:8000/edit-ingredient/', {
                indicator : 'Saving...',
                tooltip   : 'Click to edit...',
                submit    : 'OK',
                cancel    : 'Cancel'
            }),
    endEdit: function() {
            $(this).attr('value', 'Edit item');
            (shoppingList.$ingrLinks).attr('href', '#');
            $('.editme').editable("disable");
            (shoppingList.$ingrLinks).bind('click', shoppingList.ingredients) // re-enable highlighting items
        })
};

$($.proxy(shoppingList, 'init'));