3

我处于必须使用 jQuery 1.6 的情况。网站 jQuery 文件类型不受我控制。我有以下带有属性的 HTML 元素...

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

每次我从下拉菜单中选择一个选项时，上面代码的显示属性将切换为 display:block 5 - 10 秒之间的任何时间。它因人而异。然后切换回显示：无。

我希望能够使用 live() 来检测该显示属性何时返回显示：无。jQuery可以做到吗？我需要从头开始执行此操作，因为我无法访问控制 HTML 元素的原始 js 函数。

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

感谢您的任何建议

4

2 回答 2

2

听起来你想“观察”style.display那个 div 的值。这并非不可能，但不切实际且不稳定。最简单的解决方案是在下拉列表本身上添加一个新的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直接监控属性变化，但它存在支持和性能问题。

于 2013-06-13T14:32:10.963 回答
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 秒。或者如果它突然变慢了，它仍然应该处理它。

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

于 2013-06-13T15:14:08.453 回答