0

コメントをインラインで編集できる機能を追加しようとしています。これまでのところかなり近いですが、2 番目のイベントをトリガーしようとして問題が発生しています。最初はうまくいきますが、その後失敗します。

$(function() {
    var $editBtn = $('.js-edit-comment-btn');
    var clicked = false;

    $editBtn.on('click', $editBtn, function() {
        clicked = true;
        var $that = $(this);
        var $form = $that.closest('.js-edit-comment');
        var $commentTextBody = $that.closest('div').find('.js-comment-body');
        var commentText = $commentTextBody.text();
        var $editableText = $('<textarea />');

        if ($that.text() === 'Save Edits') {
            $that.text('Saving...').attr('disabled', true);
        } else {
            $that.text('Save Edits').attr('alt', 'Save your edits');
        }
        
        // Replace div with textarea, and populate it with the comment text
        var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
            $editableText.val(commentText);
            $commentTextBody.replaceWith($editableText);
            $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
        };
        makeDivTextarea($editableText, commentText, $commentTextBody);


        var saveEdits = function($that, $editableText) {
            $that.on('click', $that, function() {
                if (clicked) {
                    var comment = $that.closest('div').find('.js-edited-comment').val();

                    $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
                    $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
                    $('#output').append('saved');
                    clicked = false;
                    return false;
                }
            });
        };
        saveEdits($that, $editableText);
        return false;
    });
});​

jsfiddleデモはこちら

4

1 に答える 1

0

実用的なソリューションのHiyaデモ: http://jsfiddle.net/8P6uz/

clicked=true問題でした:)）私は別の小さなことを修正しました。i.e. $('#output') is set to empty before appending another saved hence text **saved** will only appear once.

小さなメモ：ボタンのIDを使用することをお勧めする場合、または編集ボタンが多数ある場合は、thisすでに私が考えているものを使用してみてください。これをもっときれいに書けるかどうかはわかりますが、それはいつか後者のようになりますが、これで問題は解決するはずです。：） 楽しい！

Jクエリコード

$(function() {
    var $editBtn = $('.js-edit-comment-btn');
    var clicked = false;

    $editBtn.on('click', $editBtn, function() {
        clicked = true;
        var $that = $(this);
        var $form = $that.closest('.js-edit-comment');
        var $commentTextBody = $that.closest('div').find('.js-comment-body');
        var commentText = $commentTextBody.text();
        var $editableText = $('<textarea />');

        if ($that.text() === 'Save Edits') {
            $that.text('Saving...').attr('disabled', true);
        } else {
            $that.text('Save Edits').attr('alt', 'Save your edits');
        }

        // Replace div with textarea, and populate it with the comment text
        var makeDivTextarea = function($editableText, commentText, $commentTextBody) {
            $editableText.val(commentText);
            $commentTextBody.replaceWith($editableText);
            $editableText.addClass('gray_textarea js-edited-comment').width('100%').css('padding', '4px').focus();
        };
        makeDivTextarea($editableText, commentText, $commentTextBody);


        var saveEdits = function($that, $editableText) {
            $that.on('click', $that, function() {
                if (clicked) {
                    var comment = $that.closest('div').find('.js-edited-comment').val();

                    $editableText.wrap('<div class="js-comment-body" />').replaceWith(comment);
                    $that.text('Edit').attr('alt', 'Edit Your Comment').attr('disabled', false);
                    $('#output').text("");
                    $('#output').append('saved');
                    clicked = true;
                    return false;
                }
            });
        };
        saveEdits($that, $editableText);
        return false;
    });
});​
于 2012-04-14T23:55:21.260 に答える