私のコードは最初は正しく実行されますが、2番目(Javascript)は正しく実行されません。 変数は更新されていないようです

javascript jquery
私のコードは最初は正しく実行されますが、2番目(Javascript)は正しく実行されません。 変数は更新されていないようです

jqueryプラグインを作成しています。 クラス.editableを持つタグをダブルクリックするたびに、テキストボックスまたはテキストエリアのいずれかに置き換えられます。 .editableタグの外側をクリックすると、書き込みが行われ、テキストボックスまたはテキストエリアが削除され、元のコンテンツが書き戻されます。

初めてこれを行うと、想定どおりに動作します。 ただし、別のコンテンツフィールドをクリックして2回目にクリックすると、そのフィールドは最初にクリックした編集可能領域のコンテンツに置き換えられます。

私が話していることを確認するには、http://modx.harrishosting.com [modx.harrishosting.com]に移動し、ホームをダブルクリックします。 Webページの別の部分をクリックすると、通常の状態に戻ります。 次に、lerem ipsumコンテンツをダブルクリックして、Webページの別の部分をクリックします。 通常に戻る代わりに、Lorem ipsumコンテンツはホームコンテンツに置き換えられます。

これが私のコードです。 助けてください!

jQuery.fn.jqfEdit = function(){
    return this.each(function(){

        // Save "this" to "editable" because this changes when scope changes
        var editable = this;

        // Fix to display box-shaddow correctly when editable area is highlighted
        $(editable).css({'display':'inline-block'});

        // Highlight editable area with box-shaddow on hover
        if (!($(editable).hasClass('.selected'))) {

            // What to do on mouse over
            $(editable).mouseenter(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 10px #eec900', '-webkit-box-shadow' : '0px 0px 10px #eec900', 'box-shadow' : '0px 0px 10px #eec900'});
                }

            // What to do on mouse out.
            ).mouseleave(
                function() {
                    $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});
                }
            );
        }

        // Ending the if statement
        else {
        }

        // TO DO: Fix double/double click bug in textarea

        // What to do when double clicking an editable area
        $(editable).dblclick(function() {

            // Give the editable area the class "selected"
            $(editable).toggleClass('selected');

            // What to do if editable area is selected (has "selected" class)
            if ($(editable).hasClass('selected')) {

                // Remove the previously given highlight (box-shaddow) from the editable area
                $(editable).css({'-moz-box-shadow' : '0px 0px 0px #eec900', '-webkit-box-shadow' : '0px 0px 0px #eec900', 'box-shadow' : '0px 0px 0px #eec900'});


                // Take everything inside of editable div and assign it to variable named "content"
                var content = $(editable).html();

                // Get the height and width of editable div.
                var height = $(editable).height();
                var width = $(editable).width();

                // Add a few pixels to the width for textbox
                var textBoxHeight = height+5;
                var textBoxWidth = width+10;

                // If length of content is less than 50 characters then use a textbox
                if (content.length < 50) {
                    $('.selected').html('    ');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textbox').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }

                }

                // If length of content is more than 50 characters then use a textarea
                else {
                    $('.selected').html(' ' + content + '   ');

                    // If you click outside of editable div while textbox is focused then remove the editable area and change back to normal.
                    if ($('#jqfEdit-textarea').focus()) {
                        $('body').click(function() {

                            if ($('.selected').html(content)) {
                                $('.selected').toggleClass('selected');
                            }

                        });
                        $(editable).click(function(event){

                            event.stopPropagation();

                        });

                    }
                }
            }
        });
    });

};

  1  1


ベストアンサー

考えられる理由の1つは、記述するHTMLの一部のIDに特定の値を使用していることです。 editableのIDを追加したいかもしれません。 ページ全体で一度に2つのフォームが可能かどうか(CSSで非表示になっている場合でも)を判断するのに十分なほど進んでいません。 これが発生した場合、それ以降は動作しません。

これが唯一の理由ではなく、コードを非常にすばやく読むことで可能になる理由の1つです。

0


私はそれを適切にデバッグする時間を持っていませんが、可能性のある問題として私に飛び出す2つのことは次のとおりです。

ここで作成されたクロージャー:

$('body').click(function() {
    if ($('.selected').html(content)) {
        $('.selected').toggleClass('selected');
    }
});

クロージャの外側で定義された変数 `content`を使用しているため、関数が最後に実行されたときに残り物が残る可能性があります。

また、イベント( `$( ‘body’)。click`行)内にイベントを追加するときは注意してください。2回発生するイベントが発生する可能性があります。

0


タイトルとURLをコピーしました