如何從Bootstrap輪播jQuery中的對象數組設置背景圖像？

Question

我有一組項目，每個項目（對象）都有屬性背景，我在其中存儲圖像的URL。這是我的數組

HTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators"></ol>
        <!-- Inner -->
        <div class="carousel-inner" role="listbox"></div>
        <!-- Controlls -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

這是jQuery插件的腳本：

$(items).each(function(index){
                $('.carousel-inner', self).append('<div class="item"><div class="container"><div class="carousel-caption">' + this.tournamentName + ' / ' + this.matchStatusName + '</div>');
                $('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');
                $('.carousel-indicators', self).append('<li data-target="#myCarousel" data-slide-to="'+index+'"></li>');
                $('.carousel-indicators li:first, .carousel-inner div.item:first', self).addClass('active');
                $(self).carousel();
            });

我試圖設置背景$('.carousel-inner .item.active').css('background', 'url(' + this.background + ')'); 以及$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')'); 但這是行不通的，它只顯示帶有該圖像的第一項，並一直保持這種狀態，直到到達幻燈片末尾為止。

有人可以幫忙嗎？

Answer 1

您的問題在於$('.carousel-inner div.item.active') ，在這里您試圖選擇具有活動類的div，但是您的div還沒有活動的類。

替換此行代碼

$('.carousel-inner div.item.active').css('background', 'url(' + this.background + ')');

用

$('.carousel-inner div.item:eq('+index+')').css('background', 'url(' + this.background + ')');