多个自举转盘，只能控制一个

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。

其中一个应改为不同的ID（＃carousel2，例如）。然后，相关控件应该更新为href =“＃carousel2”

一般而言，您应该只使用每页一次的ID。