Bootstrap Carousel 刪除項目和指標問題

Question

我有一個 bootstrap carousel，其中包含 10 個左右帶有指示器的項目。 指示器也是可點擊的，並且可以在點擊時滾動到每個項目，例如 data-slide-to="1" 屬性應用於元素。 旋轉木馬按預期工作，沒有任何問題。

我現在需要在某些情況下刪除項目。 當我嘗試從當前未處於活動狀態的輪播中刪除一個項目時，我的 javascript 會運行並且我的輪播仍然可以正常工作。

但是，如果我要刪除的項目當前處於活動狀態，這是在刪除項目和指示器后輪播停止工作的時間。 我知道總是需要有一個“活動”項目，這就是為什么我調用 carousel.('next') 如果活動項目是要刪除的項目。

有人可以指出我下一步需要做什么來解決這個問題的正確方向。 （此外，當我刪除一個項目時，我的指標是否應該被自動刪除）。

任何幫助，將不勝感激。

 $('#Container').children().each(function (index, item) { var id = item.id; if (!eventData.evList.some(ev => ev.ev_no == id)) { var carElement = $('.carousel').find('#' + id); if ($(carElement).hasClass('active')) { $('.carousel').carousel('next'); } carElement.remove(); $('#' + id + 'ind').remove(); $('#evIndicators').children().each(function (index, item) { $(item).attr('data-slide-to', index); }); } });

 <div id="carouselIndicators" class="carousel slide pointer-event"> <ol id="evIndicators" class="carousel-indicators" style="margin-top: -50px; height: 50px; float: left;"> <li id="2245ind" data-target="#carouselIndicators" data-slide-to="0" class="active">22</li> <li id="2315ind" data-target="#carouselIndicators" data-slide-to="1">23</li> <li id="2345ind" data-target="#carouselIndicators" data-slide-to="2">24</li> </ol> <div id="Container" class="carousel-inner"> <div id="2245" class="carousel-item active"> <a id="22451" class="btn-link" href="#" onclick="showAddDialog(22451,8,1)"> <div class="runnerNum">1</div> </a> </div> <div id="2315" class="carousel-item"> <a id="23151" class="btn-link" href="#" onclick="showAddDialog(23151,9,1)"> <div class="runnerNum">1</div> </a> </div> <div id="2345" class="carousel-item"> <a id="23451" class="btn-link" href="#" onclick="showAddDialog(23451,10,1)"> <div class="runnerNum">1</div> </a> </div> </div> </div>

});

22:45 23:15 23:45 1 1 1

Answer 1

看起來您可能必須等到我啟動的幻燈片必須完成后才能實際刪除/移除滑動面板和指示器。 我通過執行以下操作來修復它。

創建一個 removeId 全局變量並將輪播元素 (carElement) 設置為一個全局變量。

$('#Container').children().each(function (index, item) {
 var id = item.id;
    if (!event.evList.some(ev => ev.race_no == id)) {
       removeId = id;
       carElement = $('.carousel').find('#' + id);
       if ($(carElement).hasClass('active')) {
          $('.carousel').carousel('next');
       }
    }                    
 });

然后使用每次幻燈片完成時運行的輪播“slid”事件，並檢查我們是否有需要刪除的候選輪播元素……然后刪除元素和指示器。

$('.carousel').on('slid.bs.carousel', function () {
    if (carElement) {
        carElement.remove();
        $('#' + removeId + 'ind').remove();
        $('#evIndicators').children().each(function (index, item) {                    
            $(item).attr('data-slide-to', index);                    
        });
        carElement = null;
        removeId = null;
   }
});

現在我不知道這是否是解決此問題的最佳方法，因為它在我看來有點凌亂。 我很高興有人幫助改進我的代碼。 謝謝。