javascript - 我如何将循环中的每个结果附加到他自己的幻灯片 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。遍历数组后，我使第一个元素处于事件状态并初始化轮播。