3

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

这是jsFiddle上的现场演示

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

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

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

我担心这些间隔不会因为这项is(':visible')业务而正常工作。所以问题是，为什么会发生这种情况（else 语句被忽略），我能做些什么来减轻这种情况？

4

1 回答 1

8

查看更新的小提琴。当您在调用 后立即检查可见性时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');
            }

        });
    });
});​
于 2012-09-26T22:24:29.500 回答