javascript - 当存在后代类时将类添加到父类

Question

我需要根据后代具有特定类的时间动态地向元素添加样式。我知道这只能用 javascript 来完成，这不是我真正的部门。

虽然我一直在寻找一些复制粘贴解决方案，但我现在求助于创建这个线程，因为我觉得这里列出的许多答案可能已经过时并且专注于兼容性。

我不是这方面的专家，但我读到这可以在不使用 jquery 的情况下在现代浏览器中很容易地完成，我只需要它在现代浏览器上工作。

<ul class="the-parent">
    <li class="the-descendant"></li>
</ul>

发生的事情是 Wordpress 插件在与菜单交互时向“后代”添加/删除类“打开”，但没有为我提供一种基于此交互来设置父项样式的方法。

Answer 1

对于我从你的问题中读到的内容，你需要设置一个 MutationObserver在子节点上，然后观察 class 属性的属性变化:

// Get a reference to the Node you need to observe classList changes on
const targetNode = document.querySelector('.child');

// Set up the configuration for the MutationObserver
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit
const config = { 
  attributes: true, 
  attributeFilter: ['class'],
};

// Callback function to execute when mutations are observed
const callback = (mutationsList, observer) => {
    for (let mutation of mutationsList) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
            mutation
              .target
              .closest('.parent')
              .classList
              .toggle('orange');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

// Later, you can stop observing
// observer.disconnect();

.parent {
  background-color: grey;
  color: white;
  padding: 30px;
}

.parent.orange {
  background-color: orange;
}

.child {
  background-color: white;
  color: black;
  padding: 20px;
}

.parent::after,
.child::after {
  content: '"'attr(class)'"';
}

<div class="parent">
  <div class="child" onclick="this.classList.toggle('clicked');">child css class: </div>
  parent css class: 
</div>

请记住，当您不再需要它时断开观察者是很重要的，否则它会保持事件状态，即使 observed node is removed from the DOM .