问题描述
我正在使用 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();
});