Bootstrap Проблема удаления каруселей и индикаторов - PullRequest
Новая
       81

Bootstrap Проблема удаления каруселей и индикаторов

0 голосов
/ 01 апреля 2020

У меня есть bootstrap карусель, содержащая около 10 предметов с индикаторами. Индикаторы также можно нажимать и при нажатии можно прокручивать каждый элемент, например, к элементам применяются атрибуты data-slide-to = "1". Карусель работает, как и ожидалось, без проблем.

Теперь мне нужно удалить предметы при некоторых условиях. Когда я пытаюсь удалить из карусели элемент, который в данный момент НЕ активен, моя javascript запускается, и моя карусель все еще работает отлично.

Однако, если элемент, который я хочу удалить, в настоящее время активен, это когда карусель перестает работать после удаления элемента и индикаторов. Я понимаю, что всегда должен быть «активный» элемент, поэтому я вызываю карусель. («Следующий»), если активный элемент - тот, который нужно удалить.

Может ли кто-нибудь указать мне правильное направление относительно того, что мне нужно сделать дальше, чтобы решить эту проблему, пожалуйста. (Также, когда я удаляю элемент, мои индикаторы автоматически удаляются).

Любая помощь будет принята с благодарностью. 

$('#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 Ответ

0 голосов
/ 02 апреля 2020

Похоже, что вам, возможно, придется подождать, пока начатый слайд не будет завершен, прежде чем я действительно удаляю / удаляю панель слайдов и индикатор. Я исправил это, выполнив следующее.

создайте глобальную переменную removeId и установите глобальную переменную элемента carousel (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 "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;
   }
});

Теперь я не знаю, является ли это лучшим способом исправить это, как это выглядит немного грязно для меня. Я был бы рад, если бы кто-то помог улучшить мой код. Спасибо.

...