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

Question

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

我想隐藏上一个按钮，只在滑块advances/scrolls时显示。

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

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

有没有办法让我被动地“观察”一个元素，看看它是否有 class added/removed？

Answer 1

您可以使用 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>

Answer 2

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

所以我需要做的就是：

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

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

JQuery: How do I passively watch an element to see when a class is removed?

javascript

jquery

slick.js