Javascript 使用变异观察者动态地向元素添加或删除类

当模式弹出时，我想从元素中删除一个类，但当我在线搜索时，我发现DOMNodeInserted，它一直在工作，直到它上线，我得到的错误是DOMNodeInserted<我一直在下面看到的错误

代码在下面工作，但已被弃用

我想实现的新代码，但我不知道如何实现

• observe（）应该在回调函数之外
• 您只需要观察

  类

  属性，其他什么都不需要，因此不需要极其昂贵的

  子树：true

• 类

  可能包含其他内容，因此您需要忽略不相关的更改

---

我能够用这个解决方案解决上述问题

 function myFunction(x) {
            if (x.matches) {
            var body = $("body");
            var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === "class") {
                var attributeValue = $(mutation.target).prop(mutation.attributeName);
                console.log("Class attribute changed to:", attributeValue);
                if(attributeValue == "ng-scope modal-open") {
                    $(".input-group").addClass("removeDisplay");  
                    $(".nav-menu").addClass("hide-nav-menu");
                } else {
                    $(".input-group").removeClass("removeDisplay");  
                    $(".nav-menu").removeClass("hide-nav-menu");
                }
                }
            });
            });
            observer.observe(body[0], {
            attributes: true
            });
            }
            } 
            // Wow It's working.
            var x = window.matchMedia("(max-width: 1240px)")
            myFunction(x) 
            x.addListener(myFunction)

---

首先，我使用匹配媒体检查屏幕大小是否小于1240px，然后使用变异和检查属性类是否存在，然后在此基础上执行某些操作。

只需签入，谢谢。我可以用下面的代码解决这个问题

let body = document.querySelector('body');
let observer = new MutationObserver(mutationRecords => {
            console.log(mutationRecords); // console.log(the changes)

            // observe everything except attributes
            observer.observe(body, {
            childList: true, // observe direct children
            subtree: true, // and lower descendants too
            characterDataOldValue: true // pass old data to callback
            });
             });
            }
            } 

new MutationObserver((mutations, observer) => {
  const oldState = mutations[0].oldValue.split(/\s+/).includes('modal-open');
  const newState = document.body.classList.contains('modal-open');
  if (oldState === newState) return;
  if (newState) {
    $('.hide-search').hide();
  } else {
    $('.hide-search').show();
  }
}).observe(document.body, {
  attributes: true,
  attributeFilter: ['class'],
  attributeOldValue: true,
});

 function myFunction(x) {
            if (x.matches) {
            var body = $("body");
            var observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.attributeName === "class") {
                var attributeValue = $(mutation.target).prop(mutation.attributeName);
                console.log("Class attribute changed to:", attributeValue);
                if(attributeValue == "ng-scope modal-open") {
                    $(".input-group").addClass("removeDisplay");  
                    $(".nav-menu").addClass("hide-nav-menu");
                } else {
                    $(".input-group").removeClass("removeDisplay");  
                    $(".nav-menu").removeClass("hide-nav-menu");
                }
                }
            });
            });
            observer.observe(body[0], {
            attributes: true
            });
            }
            } 
            // Wow It's working.
            var x = window.matchMedia("(max-width: 1240px)")
            myFunction(x) 
            x.addListener(myFunction)