Bootstrap輪播獲取當前活動的焦點對象

    在項目中使用了Bootstrap的輪播，需求是輪播下方有一個已讀按鈕，當點擊已讀按鈕時，隱藏掉當前的焦點的輪播內容；

如圖所示：

所以要獲取當前的焦點是哪一條；

下方代碼是在網絡上找到的一個方法，但是發現已經沒有了.getActiveIndex()方法，需要進行一定的修正；

$('#myCarousel').on('slide.bs.carousel', function () {
             var carouselData = $(this).data('bs.carousel');

            // var currentIndex = carouselData.getActiveIndex();//當前圖片的索引，注意：這並不是下一張圖的索引號
          console.dir($(this).data());
            // var items = carouselData.$items;//所有圖片的包裹div的數組
        });

輸出$(this).data()

發現結果

此處的$active就是我們要拿到的那個焦點對象；

所以代碼優化為：

$('#myCarousel').on('slide.bs.carousel', function () {
             var carouselData = $(this).data('bs.carousel').$active; 
        });

 

 

我給每個item加了一個id，方便操作；

當然我們的需求不一樣，拿到這個對象就好說了。剩下的，自己搞定啦~