一页上有多个自举轮播，只能控制一个

Question

我在视图中一次加载了动态数量的轮播，但是我只能滚动显示的第一个轮播。如何控制所有已加载的？一次只能查看一个转盘，其他的则被隐藏。

$('#myCarousel').carousel({
  interval: 10000
})

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
});

HTML：

<div class="draft posts" id="draft_1"><div class='container'>
  <div class='col-md-12'>
    <div class='carousel slide' id='myCarousel'>
      <div class='carousel-inner'>
        <div class='item active'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Revised
              </div>
              <div class='view-draft-title'>

                        <h2>I'm editing htis draft</h2>
                      <p contenteditable="true"> </p>
              </div>
              <div class='view-draft-body'>

                        <h2>I'm editing htis draft</h2>
                      <p contenteditable="true"> </p>
              </div>
            </div>
          </div>
        </div>
        <div class='item'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Original
              </div>
              <div class='view-draft-title'>
                <h1>This is Tsteting new draft</h1>
              </div>
              <div class='view-draft-body'>
                <h2>Click to W<span style="color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif; font-size: 14px; line-height: 25px;">$('#post-body textarea').val(content)&nbsp;</span><span style="line-height: 1.1;">&nbsp;editing</span></h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class='left carousel-control' data-slide='prev' href='draft_1 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-left'></i>
    </a>
    <a class='right carousel-control' data-slide='next' href='draft_1 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-right'></i>
    </a>
  </div>
</div>
</div>
<div class="draft posts" id="draft_2"><div class='container'>
  <div class='col-md-12'>
    <div class='carousel slide' id='myCarousel'>
      <div class='carousel-inner'>
        <div class='item active'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Revised
              </div>
              <div class='view-draft-title'>

                        <h2>Draft 2 After edit</h2>
              </div>
              <div class='view-draft-body'>

                        <h2>Draft 2 After edit</h2>
              </div>
            </div>
          </div>
        </div>
        <div class='item'>
          <div class='col-lg-6 col-xs-6 col-md-6 col-sm-6'>
            <div id='border'>
              <a href='#'></a>
              <div class='text-center'>
                Original
              </div>
              <div class='view-draft-title'>
                <h1>Number 2</h1>
              </div>
              <div class='view-draft-body'>
                <h2>Draft 2 before edit</h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a class='left carousel-control' data-slide='prev' href='draft_2 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-left'></i>
    </a>
    <a class='right carousel-control' data-slide='next' href='draft_2 #myCarousel'>
      <i class='glyphicon glyphicon-chevron-right'></i>

Answer 1

您有两个ID为#myCarousel的轮播。

Answer 2

您是否会如此友善，并在通过类名初始化的位置粘贴一部分代码