在 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');
    });
});