如何将循环中的每个结果附加到他自己的幻灯片jQuery Bootstrap轮播中？

Question

Helo，我正在使用我的插件，我想在Bootstrap轮播中自己的幻灯片中显示插件脚本的所有结果。 我的HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides. "Item" and "item active" is just for showing how this slider works -->
      <div class="carousel-inner" role="listbox">
       <div class="item active">
          <img src="img/fullimage1.jpg" alt="Chania">
        </div>

        <div class="item">
          <img src="img/fullimage2.jpg" alt="Chania">
        </div>


      </div>

      <!-- Left and right controls -->
      <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

我的插件脚本：

self.buildHtml = function(results){

        var limit = self.options.maxMatches;

        $.each(results.doc, function(){
            for(var i =0; i< this.data[0]['realcategories'].length; i++){
                var RealCategory = this.data[0]['realcategories'][i];
                var realcategoryName = RealCategory.name;
                for(var j= 0; j< RealCategory.tournaments.length; j++){
                    var tournamentName = RealCategory.tournaments[j].name;
                    var seasonTypeName = RealCategory.tournaments[j].seasontypename;

                        self.append('<div class="item active">'tournamentName+' - '+ seasonTypeName +'</div>');

                    limit--;

                    if (limit <= 0) {
                        return false;
                    };
                };
            };
        });

    };

如果我离开self.append('<div class="item active">'tournamentName'</div>'); 我在一张幻灯片中得到所有结果。 我知道其他结果应该在class="item"但我不知道该怎么做。 在这里，我称插件为：

$('.carousel-inner').matchCarousel();

结果我明白了。 我想要的是每个项目都放在自己的幻灯片中，即10张幻灯片。有人可以帮我吗？ 谢谢。

Answer 1

这应该可以帮助您入门： https : //jsfiddle.net/1kz4ssn3/

$(document).ready(function() {
  var items = [
    'Primeria Division',
    'Eredivisie'
  ];

  var carousel = $('#myCarousel');

  $(items).each(function(k) {
    $('.carousel-inner', carousel).append('<div class="item"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="><div class="container"><div class="carousel-caption"><h1>'+this+'</h1></div></div></div>');

    $('.carousel-indicators', carousel).append('<li data-target="#myCarousel" data-slide-to="'+k+'"></li>');
  });

  $('.carousel-indicators li:first, .carousel-inner div.item:first', carousel).addClass('active');
  $(carousel).carousel();
});

我基本上要做的是遍历一系列锦标赛，然后为其创建div.item和li.carousel-indicator 。 遍历数组后，我将第一项激活并初始化轮播。