jQuery .on() 从列表动态创建内容轮播

Question

我正在使用一个简单的 ajax 调用从共享点列表中获取某些信息并从中创建一个轮播。

我认为我需要使用 .promise() 或 .on() 以便在 for 循环遍历列表后加载它，因此我将一个对象添加到轮播中，但我不知道如何实现这一点。

这是我的循环的样子。它确实正确获取了所有数据。

 for (var i = 0; i < data.d.results.length; i++) {
                    response = '<article class="item"><img src="' + data.d.results[i].Image_x0020_URL + '"><div class="carousel-caption"><h3>' + data.d.results[i].Title + '</h3><p>' + data.d.results[i].Content + '</p><p><a class="btn btn-info btn-sm">Read More</a></p></div></article>';
                    indicator = '<li data-target="#myCarousel" data-slide-to="'+i+'" class="active"></li>';
                }

在 for 循环之后，我将我的信息附加到我的轮播中：

$('#homepageItems').append(res);
$('#indicators').append(ind);

我的轮播代码：

<div id="myCarousel" class="carousel slide">
  <div class="carousel-inner" id="homepageItems">
      <!-- Indicators -->
    <ol class="carousel-indicators" id="indicators">
    </ol>
    <div class="carousel-controls"> <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span class="fa fa-angle-double-left"></span> </a> <a class="carousel-control right" href="#myCarousel" data-slide="next"> <span class="fa fa-angle-double-right"></span> </a> </div>
  </div>
</div>

我已将 for 循环添加到变量中：

var loop = function(){forloop in here}

然后添加

$.when(loop()).done().... 

这确实会遍历所有结果并向我显示当通过 alert("finished"); 触发时我把时间放在里面，但轮播没有渲染。

for 循环完成后如何将对象加载到轮播中？

Answer 1

您不需要.on 来创建轮播。

查看这个问题的答案：Bootstrap Carousel with dynamic items does not slide

所以在你的 for 循环之后，你只需这样做：

$.ajax( {
   url: '/carousel',
   dataType: 'json',
   success: function(data) {
      var response = '',
          indicator = '';
      for (var i = 0; i < data.d.results.length; i++) {
          response += '<div class="item"><img src="' + data.d.results[i].Image_x0020_URL + '"><div class="carousel-caption"><h3>' + data.d.results[i].Title + '</h3><p>' + data.d.results[i].Content + '</p><p><a class="btn btn-info btn-sm">Read More</a></p></div></div>';
          indicator += '<li data-target="#myCarousel" data-slide-to="'+i+'"></li>';
      }
      $('#homepageItems').append(response);
      $('#indicators').append(indicator);

      // set up the first slide as "active"
      $('.item').first().addClass('active');
      $('.carousel-indicators > li').first().addClass('active');
      $("#myCarousel").carousel();
     }
});

Plunker here.