如何观察向 div 添加类

Question

在我的div中我想观察他的类，所以当这个类passed被添加到我的div中时，我执行了一些js函数。

初始 div：<div id="1" class="allow"></div>

添加新类后：<div id="1" class="allow passed"></div>

我要执行的函数：

function fill() {
        jQuery('#check').show();
        jQuery('#check-val').hide();
    }

Answer 1

您还可以在该 div 上使用突变观察器来检测何时添加了一个类。注意突变观察者的用法。https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

    var observer = new MutationObserver(function(mutations) {
       mutations.forEach(function(mutation) {
         if (mutation.attributeName === "class") {
            if ($(mutation.target).hasClass('passed')){
                    alert("passed class was added");
                    fill();
           }
         }
     });
  });

observer.observe(document.getElementById('1'), {
  attributes: true
});

这是一个 jsfiddle https://jsfiddle.net/e37am2hq/