jQuery 在元素 class 更改时执行功能

Question

我已经设置了一个 swiper 滑块，并希望在它到达特定幻灯片时启动一个功能。这是我到目前为止所做的，但没有用：

// event listener
 function addClassNameListener(elemId, callback) {
    var elem = $(".swiper-home .swiper-slide:nth-child(2)");
    var activeClassName = 'swiper-slide-active';
    window.setInterval( function() {   
     var className = elem.className;
      if (className == activeClassName) {
        callback();   
      }
    },10);
  }

addClassNameListener("foo", function(){ 
  $('.swiper-slide-active .count').each(function () {
    //$('body').scrollTop($(this).parent.offset().top);
    $(this).prop('Counter', 0).animate({
      Counter: $(this).data().total
    }, {
      duration: $(this).data().seconds * 1000,
      easing: 'swing',
      step: function (now) {
        $(this).text(Math.ceil(now));
      }
    });
  });
  alert("changed"); 

});

我设置了一个jsFiddle

Answer 1

实际上你做错了几件事。

您正在访问 elem 上的 className，而它是 jquery 对象，而不是 dom 元素，因此它没有属性.即使可以，它也会给所有类以空格分隔，所以你最好检查一下 elem.hasClass(activeClassName)

即便如此，无论幻灯片是否更改，您的回调函数都会每 10 毫秒执行一次

如果你查看你正在使用的刷卡库的api，你可以使用他们提供的。

例如在幻灯片更改事件上使用活动幻灯片：

var swiper = new Swiper('.swiper-container', {
    onSlideChangeEnd: function(swiper) {
        var $activeSlide = $(swiper.slides[swiper.activeIndex]);
        //check if this slide is the one you are looking for
        if ($activeSlide.attr('id') == elemId)
        {
            //do your stuff with the active slide
        }
   }
});

jQuery 在元素 class 更改时执行功能

jQuery perform function when element class changes

javascript

jquery

swiper