在Carousel Bootstrap Ajax Jquery中添加活动类

Question

我有这组代码，设法从数据库(数据引用表)动态调用图像

HTML旋转木马:

<!--- Carousel Slider --->
<div class="col-lg-8 col-md-12">
<div class="text-center mb-50">
<div class="card" style="border: none;">
<div class="">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" id="carousel"></div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</div>

Jquery代码:

$(document).ready(function() {
// display carousel
$.getJSON("/datas/json?id=8&q=status_carousel%:%Show", function(data) {
$("#carousel").html('');
var carousel_output = "";
$.each(data, function () {
carousel_output +=  "<div class='carousel-item'><img class='d-block w-100' src='"+ this.value +"'></div>";
});

$("#carousel").append(carousel_output);
});
});

但是，它仍然没有显示使用上面的脚本调用的图像。我尝试了几种在代码中添加活动类的方法，但令我失望的是，它们都不起作用。谢谢你们的帮助。

Answer 1

试试这个:

$(document).ready(function () {
// display carousel
$.getJSON("/datas/json?id=8&q=status_carousel%:%Show", function (data) {
var carousel_output = "";
$.each(data, function () {
carousel_output += "<div class='carousel-item'><img class='d-block w-100' src='" + this.value + "'></div>";
});
$("#carousel").html(carousel_output);
$("#carousel").find('.carousel-item:first-child').addClass('active');
});
});