javascript - 如何从 Bootstrap carousel 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') ，在这里你试图选择具有 active 类的 div，但是你的 div 没有 active 类还没有。

替换你的这行代码

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

与

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