0 
$(document).ready(function () {
    $("#button").toggle(function () {
        $("#preview").animate({
            height: 940,
            width: 940
        }, 800);
        $("#button").replaceWith('<div id="button" style="margin:50px">Close</div>');
    }, function () {
        $("#preview").animate({
            height: 500,
            width: 500
        }, 800);
        $("#button").replaceWith('<div id="button" style="margin:0px">Open</div>');
    });
});

これにより、プレビュー画面のサイズが変更され、ボタンが変更されますが、トグルの 2 番目の部分は実行されません。つまり、プレビューのサイズが変更され、ボタンの値が元の状態 (開く) に変更されます。

これを修正する方法はありますか？

4

2 に答える 2

2

そのtoggle()ように使用される関数は非推奨になり、jQuery の最新バージョンでは削除されます。独自のトグル機能を作成する必要があります。また、要素を新しい要素に置き換えると、イベント ハンドラーが失われます。

$("#button").on('click', function() {
    var state = $(this).data('state');
    if ( state ) {
        $("#preview").animate({height: 500, width: 500 }, 800);
        state = false;
    }else{
        $("#preview").animate({height: 940, width: 940 }, 800);
        state = true;
    }
    $(this).text(state ? 'Open' : 'Close').data('state', state);
});

フィドル

于 2013-05-16T14:52:19.090 に答える
0

これは、「toggle()」以外の別の手法を使用して、目的を達成するための実用的なフィドルです。この手法では、フラグを使用して、クラスを追加および削除することにより、「開く/閉じる」ボタンの状態を設定します。

作業フィドル:
http://jsfiddle.net/nY6UC/2/

jqueryコード:

$(document).ready(function () {

    $("#button").on("click", function () {

        if ($(this).hasClass("close")){

            $(this).removeClass("close");
            $(this).text("open");
            $("#preview").animate({
                height: 100,
                width: 100
            }, 800);
        }else{

            $(this).addClass("close");
            $("#preview").animate({
                height: 300,
                width: 300
            }, 800);
            $("#button").text("close");
        }
    });

});

CSS:

#button, #preview{     width: 100px;    height: 100px; }
#button {     background-color: red;}
#preview{     background-color: blue;}
于 2013-05-16T15:03:53.517 に答える