0

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

如果我不将这两个函数包含在括号内，我会收到一个 javascript syntax error 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对象文字中并仍然按预期工作？

4

1 回答 1

2

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'));
于 2012-11-17T23:43:06.470 回答