JQuery 检测类更改答案

【问题标题】：JQuery Detect class changesJQuery 检测类更改
【发布时间】：2012-03-24 21:11:20
【问题描述】：

我使用的插件在打开时将open 类添加到.slide-out-div。

所以如果检测到打开，我会尝试更改一些 css。

我需要做的是

IF

$('.slide-out-div **open**') IS Detected then

$('.otherDiv').css('top','0px');

不知道如何组合...

【问题讨论】：

什么时候添加类？
@MildFuzz。我猜他控制不了它，它是一个插件......
你用的是什么插件？将解决方案应用到使用的脚本中听起来是一个更好的计划。
另外，插件作者可能添加了自定义事件。值得一试。
jQuery - Fire event if CSS class changed的可能重复

标签： javascript jquery

【解决方案1】：

没有class-added的事件，需要你自己去追踪……

可以通过setTimeout 的无限循环来检查类是否已更改。

function checkForChanges()
{
    if ($('.slide-out-div').hasClass('open'))
        $('.otherDiv').css('top','0px');
    else
        setTimeout(checkForChanges, 500);
}

您可以在需要时调用该函数，或者 onDOM 准备好：

$(checkForChanges);

【讨论】：

这行得通。但是，如果您问我，这是一种非常肮脏的方法。
@sieppl。 mutation events 已弃用，因为它们会对性能产生巨大影响。
@gdoron。 +1 提及这一点。
@gdoron - 它们没有被弃用！（检查 MDN）旧的，变异观察者是检测变化的新方法。方法如下 - stackoverflow.com/a/14570614/104380
@Healkiss 完全一样。堆栈不会无限增长。

【解决方案2】：

这个问题有点老了，但是因为我在寻找类似问题时遇到了，所以我想在这里分享我使用的解决方案 - Mutation Observers

在你的情况下，我会创建一个变异观察者

var mut = new MutationObserver(function(mutations, mut){
  // if attribute changed === 'class' && 'open' has been added, add css to 'otherDiv'
});
mut.observe(document.querySelector(".slide-out-div"),{
  'attributes': true
});

.slide-out-div 的某个属性发生变化时，突变观察器中的函数就会被调用，所以在执行之前需要验证实际变化。

更多详情请点击Mozilla's documentation page

【讨论】：

这看起来是个不错的方法，但需要注意的是它似乎不支持 IE10 及更早版本。
这个建议太好了，因为是原生的 :) 谢谢你的分享。
Mutation Observer 是一个很棒的功能。 :) 感谢分享。

【解决方案3】：

您可以使用attrchange jQuery plugin。该插件的主要功能是绑定一个HTML元素属性变化的监听函数。

代码示例：

$("#myDiv").attrchange({
    trackValues: true, // set to true so that the event object is updated with old & new values
    callback: function(evnt) {
        if(evnt.attributeName == "class") { // which attribute you want to watch for changes
            if(evnt.newValue.search(/open/i) == -1) { // "open" is the class name you search for inside "class" attribute

                // your code to execute goes here...
            }
        }
    }
});

【讨论】：