jquery - 一页多个bootstrap轮播，只能控制一个

Question

我在一个 View 中同时加载了动态数量的轮播，但我只能滚动浏览呈现的第一个轮播。我怎样才能控制所有加载的？一次只能查看一个轮播，其他轮播都是隐藏的。

$('#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 的轮播。

其中一个应该更改为不同的 ID(例如#carousel2)。然后关联的控件应该更新为 href="#carousel2"

一般来说，每个页面只应使用一次 ID。