Question

我目前正在尝试使用MutationObserver API根据元素的类更改来触发消息（稍后将是函数）。

我目前正在启动变异登录，但我假设有一些突变，例如DOM位置等正在发射。有没有办法让MutationObserver仅查找特定attributes class？

作为一个Drupal开发人员，我习惯使用jQuery，这就是为什么我喜欢链接的classList函数。

这是我的代码：

var foo = document.getElementById("foo");
var wrapper = document.getElementById("wrapper");

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.attributeName === "class") {
        	var attributeValue = mutation.target.getAttribute(mutation.attributeName);
            console.log("Class attribute changed to:", attributeValue);
        }
    });
});

function classList(el) {
  var list = el.classList;
  return {
      add: function(c) { 
         if (!list.contains(c)){
            console.log('Contains: '+list.contains(c));
      	    list.add(c); 
         }
         return this;
      },
      remove: function(c) { 
         if (!list.contains(c)){ 
            list.remove(c); 
         }
         return this; 
      }
  };
}

observer.observe(foo,  {
    attributes: true
});

wrapper.addEventListener("scroll",function(){
    classList(foo).add('red').remove('yellow');
    if(wrapper.scrollTop > 500){
         classList(foo).add('yellow').remove('red');
    }
});

#wrapper {
  height: 200px;
  overflow: scroll;
}
#foo {
  height: 1000px;
}

<div id="wrapper">
   <div id="foo">Element</div>
</div>

Answer 1

虽然@wOxxOm在他的评论中回答了我的问题（疏忽），但是我应用了这个函数并意识到我不再需要forEach，因为我只期望一个单一的属性，所以完成的（测试）代码看起来像： p>

＆＃13;

var foo = document.getElementById("foo");
var wrapper = document.getElementById("wrapper");

var observer = new MutationObserver(function(mutation) {
    console.log('Current class:' + mutation[0].target.className);
});

observer.observe(div, {
    attributes: true,
    attributeFilter: ['class']
});

wrapper.addEventListener("scroll",function(){
    if(wrapper.scrollTop > 500){
        if(!foo.classList.contains('yellow')){
           foo.classList.add('yellow');
           foo.classList.remove('red');
        }
    } else {
        if(!foo.classList.contains('red')){
           foo.classList.add('red');
           foo.classList.remove('yellow');
        }
    }
});

＆＃13;

#wrapper {
  height: 200px;
  overflow: scroll;
}
#foo {
  height: 1000px;
}

＆＃13;

<div id="wrapper">
   <div id="foo">Element</div>
</div>

＆＃13;

我已经整理了变异观察者以找到类名。我删除了我的函数以允许我链接类元素，因为我遇到了一个问题，即即使没有更改类，它也会触发变异，只是因为元素被返回。

MutationObserver具有特定突变

1 个答案: