Question

我遇到了必须使用jQuery 1.6的情况。网站jQuery文件类型是我无法控制的。我有以下带有属性的HTML元素......

<div id="myitem" style="display: none; position: absolute;" role="status" aria-hidden="true">
...
</div>

每次从下拉菜单中选择一个选项时，上面代码的显示属性将切换为display：block，持续5到10秒之间的任何时间。它有所不同。然后切换回显示：无。

我希望能够使用live（）来检测显示属性何时返回display：none。这有可能与jQuery？我需要从头开始这样做，因为我无法访问控制HTML元素的原始js函数。

这可能吗？（即只是做一个console.log（'显示现在再次隐藏'））

感谢您的任何建议

Answer 1

听起来你想要“观察”该div上style.display的值。这不是不可能的，但不实用和不稳定。最简单的解决方案是在下拉列表中添加一个新的change事件处理程序。为此，您可以使用.live（对于该jQuery版本），.delegate或.change（只要在加载DOM时执行此操作）。并确保在添加下拉列表的原始事件处理程序之后注册该事件。

要处理超时，请从处理程序设置一个计时器，并确保它超过另一个计时器的最大时间。

例如：

$(function(){ $('#dropdown').change(function() { setTimeout(function() { console.log('checking display property'); if($('#myitem').css('display') == 'none') { console.log('the display is now hidden again'); } }, 11000); }); });

概念证明：http://jsfiddle.net/wLEPh/1/

这里需要注意的是，如果您在原始计时器和新计时器运行之间再次更改显示。在这种情况下，您的代码将不会检测到div已被隐藏片刻。另一种方法是使用MutationOberver直接监视属性更改，但它有支持和性能问题。

Answer 2

使用setInterval而不是一次超时对bfavaretto答案略有改动：

$(function(){
    $('#dropdown').change(function() {
        var timerID = setInterval(function() {
            console.log('checking display property');
            if($('#myitem').css('display') == 'none') {
                console.log('the display is now hidden again');
                clearInterval(timerID);
            }
        }, 1000);
    });
});

您也可以进行检查，以便在经过一段时间后，您的元素仍然没有消失，您还可以做其他事情。

优点是如果元素再次消失需要5秒钟，你只需要等待最多约6秒。*但它需要10秒钟，它仍会等待10秒，或者最多~11秒秒。如果某些内容随您的第三方库发生变化而突然只需1秒钟，那么您将不会再等待超过2秒钟。或者如果它突然慢得多，它仍应该处理它。

*注意：显然这些时间都不应该是准确的。

如何使用live（）来检测元素属性何时从显示块切换到显示无？

2 个答案: