Question

我有一个按钮，用于切换其下方<div>的可见性，并希望根据所述<div>的可见性修改按钮上的文字。

的现场演示

如果单击“已保存的数据”，则第一次正常工作，但下次单击文本时不会更改。这本身就是我不理解的行为。

现在，我可以在slideToggle()，然而中使用多个处理程序，代码中的其他地方我也设置了加载“Cookie数据：”和“服务器数据：”旁边数据的间隔。如果<div>不可见，我不希望这些间隔做任何事情所以我使用这样的东西：

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

由于此is(':visible')业务，我担心这些时间间隔无法正常运行。所以问题是，为什么会发生这种情况（否则会忽略语句），我该怎么做才能缓解这个问题？

Answer 1

查看updated fiddle。当您在调用slideToggle后立即检查可见性时，jQuery可能尚未更新元素的可见性，因为动画需要一些时间才能完成。出于这个原因，slideToggle有一个回调，可以在动画结束后用来执行操作：

$(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');
            }

        });
    });
});

检查切换元素的可见性

1 个答案: