Question

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

我认为我需要使用.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循环添加到varible中：

var loop = function(){forloop in here}

然后添加

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

这会循环显示所有结果，并告诉我通过警报触发时（“已完成”）;我放在里面，但旋转木马没有渲染。

在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

jQuery .on（）从列表中动态创建内容轮播

1 个答案: