3

その下の表示を切り替えるボタンがあり、<div>その表示に応じてボタンのテキストを変更したいと思います<div>。

これがjsFiddleのライブデモです

[保存されたデータ]をクリックすると、最初は正しく機能しますが、次にクリックしたときにテキストは変更されません。これ自体は私にはわからない振る舞いです。

これで、複数のハンドラーを使用できますが、slideToggle()コードの他の場所で、「Cookiedata：」と「Serverdata：」の横にデータをロードする間隔も設定しました。が表示されていない場合、これらの間隔で何も実行したくないので、次のようなものを使用します。<div>

    this.timer_cookiedata = setInterval(function(){
        if (!$savedData.is(':visible'))
        {
            return null;
        }
        // ..
    });

is(':visible')この事業のため、これらの間隔が適切に機能しないのではないかと心配しています。したがって、問題は、なぜこれが発生するのか（elseステートメントは無視される）、そしてこれを軽減するために何ができるかということです。

4

1 に答える 1

8

Check out the updated fiddle. When you check for visibility right after you call slideToggle, jQuery may not have updated the visibility of the element yet since the animation takes some time to finish. For this exact reason, slideToggle has a callback you can use to perform operations after the animation has finished:

$(function () {
    var $savedData = $('#savedData');
    $('#btn-savedData')
        .click(function () {
        var $button = jQuery(this);

        //I'm checking the visibility in the callback. Inside the callback, 
        //I can be sure that the animation has completed and the visibility 
        //has been updated.
        $savedData.slideToggle('fast', function () {
            if ($savedData.is(':visible')) {
                $button.html('visible');
            } else {
                $button.html('not visible');
            }

        });
    });
});​
于 2012-09-26T22:24:29.500 に答える