如何监听.woocommerce-product-gallery__wrapper动态添加.test类并触发操作

你编写的代码仅会在脚本加载执行的那一刻做一次类名判断，只会校验代码运行瞬间目标元素是否带有.test类，后续该类被JS动态增删时不会重新触发校验逻辑，因此无法实现持续监听的效果。

推荐使用原生MutationObserverAPI实现DOM属性变化监听，该API专门用于监听DOM节点的属性、子节点等变更，性能远高于定时轮询，且会在变化触发时立刻执行回调，完整实现代码如下：

// 定位目标元素：同时匹配figure标签和.woocommerce-product-gallery__wrapper类
const targetEl = document.querySelector('figure.woocommerce-product-gallery__wrapper');
// 监听配置：仅监听class属性的变化
const observerOptions = {
  attributes: true,
  attributeFilter: ['class']
};

// 变化触发的回调函数
const classChangeHandler = () => {
  if (targetEl.classList.contains('test')) {
    console.log('Hello');
    // 你需要执行的其他操作写在这里
  }
};

// 实例化观察者并启动监听
const classObserver = new MutationObserver(classChangeHandler);
classObserver.observe(targetEl, observerOptions);

// 后续不需要监听时可执行以下代码销毁观察者，释放内存
// classObserver.disconnect();

如果你习惯使用jQuery，也可以用兼容写法：

const $target = $('figure.woocommerce-product-gallery__wrapper');
const observer = new MutationObserver(() => {
  if ($target.hasClass('test')) {
    console.log('Hello');
    // 其他操作
  }
});
observer.observe($target[0], { attributes: true, attributeFilter: ['class'] });

注意：如果你的脚本是在head标签中加载的，需要把上述代码包裹在DOM加载完成的回调中，避免页面还没渲染完找不到目标元素：

document.addEventListener('DOMContentLoaded', () => {
  // 把监听代码放在这里
});

内容的提问来源于stack exchange，提问作者Thom Watson