如何从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 + ')');