jquery - 如何使用 live() 检测元素属性何时从显示 block 切换到不显示？

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直接监视属性更改，但存在支持和性能问题。