检查元素是否将状态从隐藏更改为可见[重复]答案

【问题标题】：Checking if element change state from hidden to visible [duplicate]检查元素是否将状态从隐藏更改为可见[重复]
【发布时间】：2012-09-06 12:33:08
【问题描述】：

可能重复：
jquery event handler: div becomes visible/hidden

我可以设置一个事件在某个元素被隐藏然后被js设置为可见之后触发吗？

还有我可以检测js是否给元素添加了class吗？

我正在使用 jQuery

【问题讨论】：

有什么办法可以发布一些代码来帮助我们更好地解决问题吗？对于第二个问题，您可以使用hasClass() 函数（api.jquery.com/hasClass）检查元素是否具有类。
根据这个答案stackoverflow.com/a/1950052/692560 没有内置的方法来监听正在添加/删除的类，但是来自同一问题的另一个答案 (stackoverflow.com/a/1950199/692560) 提供了一种获取假设对类的所有更改都是使用 JQUery 完成的，类似的效果。我看不到任何由隐藏或显示元素触发的 DOM 事件，但可以应用覆盖 JQuery 函数的相同原理。
如果你控制导致显示/隐藏的代码，你应该在那里执行你的其他代码。
@Thor84no: 重写 jquery 函数看起来像是解决我的问题

标签： javascript jquery javascript-events

【解决方案1】：

是的。您可以通过事件跟踪类的添加和删除。

您可以使用DOMAttrModified 事件来跟踪这一点 - 顾名思义，每次修改 DOM 中 any 元素的 any 属性时都会触发该事件。

在这种特殊情况下，我们会跟踪我们希望跟踪的元素的 class 属性的修改。

演示： http://jsfiddle.net/techfoobar/dnRUu/2/

在演示中，单击“切换类”按钮将类添加到第一个 DIV。您收到的警报是由DOMAttrModified 事件触发的。

http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent

免责声明：仅在 Mozilla Firefox 中测试！

【讨论】：

它适用于所有浏览器吗？它不适用于 safari 6.0
哦！实际上只在FF上测试过。在阅读 mozilla 文档后开发了上述解决方案作为概念验证，所以这可能解释了它.. :-)
可以，但仅适用于支持 DOM 事件的浏览器，如 FF、IE9+ 等。
不，您的意思是支持 DOM 级别 2 的浏览器不支持 DOM 级别 3。它在 DOM 级别 3 中已被弃用：
stackoverflow.com/questions/6659662/… 不再支持！

【解决方案2】：

也许您可以使用间隔来处理此类事件：

function checkIt () {
    if ($('#Element').length > 0) {
        if($('#Element').is(':hidden') == true) {
           // add class name
            alert('Element was hidden');
            $('#Element').removeClass('hidden').addClass('visible');

            // or toggle class name
            //$('#Element').toggleClass('className');

            // or remove class name
            //$('#Element').removeClass('className');

            // if you want to clear the interval
            //clearInterval(listenerID);
        }
    }
}

var listenerID;
$(function(){
    listenerID = setInterval(checkIt, 500);
});

http://jsfiddle.net/KFGrL/2/

检查一个元素是否有类名：

if ($('#Element').hasClass('className')) {
    // your code
}

【讨论】：

【解决方案3】：

没有您可以订阅的此类活动。你能做的最好的就是定期运行你自己的函数来检查你关心的变化..

【讨论】：