0

以下のコードを機能させるのに苦労しています。editItems問題は、括弧内のプロパティで 2 つの関数をラップすると、コードの動作がおかしくなり、インライン css プロパティが編集ボタンに()割り当てられることです。display: none

2 つの関数を括弧内にラップしないと、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オブジェクト リテラル内に格納し、期待どおりに動作させる方法はありますか?

4

1 に答える 1

2

editItems関数は本当に奇妙に見えます。startEditと の 2 つの関数を定義するだけでよいと思います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 に答える