jQuery在元素類發生變化時執行函數

我已經設置了一個swiper滑塊，並希望在函數到達特定幻燈片時啓動該函數。這是我到目前爲止已經完成，但它不工作：jQuery在元素類發生變化時執行函數

// 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

來源

2016-11-30 babusi

你'elem'變量是一個jQuery對象，所以它沒有一個'.className'財產 - 你可以在測試改爲'如果（elem.hasClass（ activeClassName））'，從而解決這個問題*和*允許具有多個類的元素。你的'addClassNameListener（）'函數也不使用它的'elemId'參數。 – nnnnnn

嗨@nnnnnn，謝謝你，但我剛剛嘗試過，它仍然無法正常工作。 – babusi

其實有你做錯了幾件事情。

您訪問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 
     } 
    } 
});

來源

2016-11-30 05:05:09 paulitto

謝謝你。對不起，尋找錯誤 – babusi

jQuery在元素類發生變化時執行函數

回答

相關問題