Bootstrap Carousel 删除项目和指标问题

Posted 2023-03-21

【中文标题】Bootstrap Carousel 删除项目和指标问题

【英文标题】：Bootstrap Carousel removing items and indicators problem

【发布时间】：2020-07-13 15:02:19

【问题描述】：

我有一个引导轮播，其中包含 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

【参考方案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');
       
                        
 );

然后使用每次幻灯片完成时运行的轮播“滑动”事件并检查是否有需要删除的候选轮播元素...然后删除元素和指示器。

$('.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;
   
);

现在我不知道这是否是解决此问题的最佳方法，因为它看起来有点乱。我很乐意有人帮助改进我的代码。谢谢。