Question

我正在努力让下面的代码工作。问题是当我将两个函数包装在括号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);

有没有办法可以将切换事件存储在editItems对象文字中，并且仍然按预期工作？

Answer 1

editItems函数看起来很奇怪。我想你只需要定义两个函数：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'));

在对象文字内部调用jQuery toggle方法

1 个答案: