JQuery：如何被动地观察元素以查看何时删除类？

如何解决JQuery：如何被动地观察元素以查看何时删除类？

我正在使用 Slick Slider (https://kenwheeler.github.io/slick/)。

我想隐藏“上一个”按钮并仅在滑块前进/滚动时显示它。

我能想到的唯一方法是在从第一个幻灯片元素中删除 .fadeIn() 类时使用上一个按钮 .slick-active。但是，我不确定如何触发此事件。

我无法使用 .click() 函数，因为 Slick 允许您在移动设备上拖动。

有没有办法可以被动地“观察”一个元素，看看它是否添加/删除了一个类？

解决方法

您可以使用 Mutation Observers。

这是一个例子：

var targetNode = document.querySelector('.red');
const config = {
  attributes: true,childList: true,subtree: true
};

// Callback function to execute when mutations are observed
const callback = function(mutationsList,observer) {
  // Use traditional 'for loops' for IE 11
  for (const mutation of mutationsList) {
    if (mutation.type === 'childList') {
      console.log('A child node has been added or removed.');
    } else if (mutation.type === 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.');
    }
  }
};

setInterval(function() {
  targetNode.classList.toggle("red");
},1000);

const observer = new MutationObserver(callback);
observer.observe(targetNode,config);

.red {
  color: red;
}

<p class="red">red</p>

,

Prosy Arceno 的回答是正确的，但是我发现 Slick Slider 已经涵盖了像我这样的案例。

所以我需要做的就是：

  // On after slide change
  $('.js-slider').on('afterChange',function(event,slick,currentSlide,nextSlide){
    $(".prevBtn").fadeIn();
  });