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

实际上有几件事你做错了。

您正在className访问elem，而它是一个jquery对象，而不是dom元素，因此它没有此属性。即使它会，它会给所有类别用空格分隔，所以你应该更好地检查 elem.hasClass(activeClassName)

即使这样，无论幻灯片是否改变，你的回调函数都会每10毫秒执行一次

如果您查看正在使用的swiper库的api，可以使用它们提供的内容。

E.g。在幻灯片更改事件上进行活动幻灯片：

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执行函数

1 个答案: