當滑塊中的圖像處於活動狀態時顯示div

Question

我正在使用插件圖像滑塊，並嘗試顯示將與圖像相關聯的特定文本。 例如，圖片1將顯示第1段，圖片2將顯示第2段，依此類推。

我打算上傳一個片段來顯示我在做什么，但是插件代碼太多了。 因此，這是一個顯示我在做什么的jsfiddle鏈接。 有問題的主要代碼在javascript的底部，而我想顯示的文本在html的底部。 這段代碼：

$(document).ready(function() {
        $('.ma5slider').ma5slider();
        var court = $('#slide-1');
        var activeSlide = $('.slide--active') == true;
            if(court == activeSlide) {
                court.show();
          console.log('It is working');
                }
    }); 

我的display: none;文字設置為display: none; 在頁面加載時，然后在顯示特定圖像時（我相信我將其范圍縮小為.slide--active ），該文本設置為show() 。

有人看到我在做什么錯嗎？

Answer 1

這是因為當每張幻燈片輪流插入時，您沒有針對正確的活動類，我在下面修改了您的代碼：

$(document).ready(function() {
        $('.ma5slider').ma5slider();
        var court = $('.slide');
        var activeSlideClassName = 'slide--active';

        setInterval(function(){ 

          if(court.hasClass(activeSlideClassName)){
            console.log('It is working');
          }

        }, 1000);

});  

另外，每當新幻燈片出現時，您的幻燈片都將需要有一個回調函數來捕獲事件。在這種情況下，我使用setInterval()來監視DOM，這不是最佳解決方案，但是您可以理解... 。

這里的工作代碼

Answer 2

您可以像下面一樣檢查它$('.ma5slider').on('ma5.activeSlide') ： jsfiddle