Question

我正在尝试通过JQuery删除有效的轮播项目。但是在删除该项目之后，在carousel-inner类下没有显示其他项目。我的代码如下：

$('#showLocationDiv').bind('click', function(evt){
$('#location-carousel').carousel('next');
$(evt.target).closest('.item').remove();});

请帮助我，并提前致谢。

完整的代码在这里：

HTML部分

<div class="location-carousel">
                    <div id="location-carousel" data-ride="carousel" class="carousel slide text-align-center">
                        <!-- Carousel Slides / Quotes -->
                        <div class="carousel-inner">
                                                            <div data-lng="-73.95972" data-lat="45.3497926" style="padding: 0;text-align: center;" class="col-sm-12 item">
                                <div class="pad-t-b-10"><span id="locShowDivInner_1"> 45,l Canada city road, canada city, Ca, Canada, (265) 894-6847 </span>
                                    <br>
                                    <button class="btn btn-default btn-xs mar-t-10 editLocation " data-toggle="popover" data-locid="4" data-order="1" id="locationOrderId_1" data-original-title="" title="">   
                                        <i class="fa fa-pencil"></i> 
                                    </button>

                                    <button class="btn btn-danger btn-xs mar-l-10 mar-t-10 deleteLocation" data-locid="4" data-order="1">
                                        <i class="fa fa-times white-color"></i> 
                                    </button>
                                </div>
                            </div>
                                                            <div data-lng="80.25742730000002" data-lat="13.0061588" style="padding: 0;text-align: center;" class="col-sm-12 item">
                                <div class="pad-t-b-10"><span id="locShowDivInner_6"> Latice Bridge Rd Adyar , Chennai, TN, India,  </span>
                                    <br>
                                    <button class="btn btn-default btn-xs mar-t-10 editLocation " data-toggle="popover" data-locid="35" data-order="6" id="locationOrderId_6" data-original-title="" title="">  
                                        <i class="fa fa-pencil"></i> 
                                    </button>

                                    <button class="btn btn-danger btn-xs mar-l-10 mar-t-10 deleteLocation" data-locid="35" data-order="6">
                                        <i class="fa fa-times white-color"></i> 
                                    </button>
                                </div>
                            </div>
                                                            <div data-lng="88.42341999999996" data-lat="22.57736" style="padding: 0;text-align: center;" class="col-sm-12 item active">
                                <div class="pad-t-b-10"><span id="locShowDivInner_5"> saltlake bazar more, Bidhan Nagar, WB, India,(985) 577-4558</span> 
                                    <br>
                                    <button class="btn btn-default btn-xs mar-t-10 editLocation " data-toggle="popover" data-locid="34" data-order="5" id="locationOrderId_5" data-original-title="" title="">  
                                        <i class="fa fa-pencil"></i> 
                                    </button>

                                    <button class="btn btn-danger btn-xs mar-l-10 mar-t-10 deleteLocation" data-locid="34" data-order="5">
                                        <i class="fa fa-times white-color"></i> 
                                    </button>
                                </div>
                            </div>
                                                        </div>  
                        <!-- Carousel Buttons Next/Prev -->
                        <div class="control-box">
                            <a class="left carousel-control" href="#location-carousel" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
                            <a class="right carousel-control" href="#location-carousel" data-slide="next"><i class="fa fa-chevron-right"></i></a>
                        </div>
                    </div>  
                </div>

JS部分：

$('#showLocationDiv').bind('click', function(evt){
if( $(evt.target).hasClass('deleteLocation')){$('#location-carousel').carousel('next');$(evt.target).closest('.item').remove();alert('Loaction deleted successfully');}});

Answer 1

请注意，删除活动轮播项后，请确保将活动类添加到下一个可用项。一个项目必须始终具有此类以使轮播工作。

删除项目后Bootstrap-Carousel无法正常工作

1 个答案: