Блог

У меня есть этот набор кода, который позволяет динамически вызывать изображение из базы данных (справочная таблица данных)

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=8amp;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);
   });
});
 

Однако он по-прежнему не показывает изображение, которое было вызвано с помощью приведенного выше сценария. Я попробовал несколько способов добавления активного класса в код, но, к моему разочарованию, они не сработали. Ценю любую помощь от вас, ребята.

Попробуй это:

 $(document).ready(function () {
    // display carousel
    $.getJSON("/datas/json?id=8amp;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');
    });
});