jQuery。ブートストラップウィザードが次のステップに進まない

Question

私はブートストラップウィザードを使用していますが、次のステップをクリックすると、それは進んでいません。 私はそれが終わりに達すると、すべての道を進み、前を有効にしようとしています。何らかの理由で

そのが正しく

私FIDDLE

$(document).ready(function() { 

    var navListItems = $('ul.setup-panel li a'), 
     allWells = $('.setup-content'); 

    allWells.hide(); 

    navListItems.click(function(e) 
    { 
     e.preventDefault(); 
     var $target = $($(this).attr('href')), 
      $item = $(this).closest('li'); 

     if (!$item.hasClass('disabled')) { 
      navListItems.closest('li').removeClass('active'); 
      $item.addClass('active'); 
      allWells.hide(); 
      $target.show(); 
     } 
    }); 

    $('ul.setup-panel li.active a').trigger('click'); 


    $('#activate-step-2').on('click', function(e) { 
     $('ul.setup-panel li:eq(1)').removeClass('disabled'); 
     $('ul.setup-panel li a[href="#step-2"]').trigger('click'); 
     $(this).remove(); 
    })  
    $('#activate-step-3').on('click', function(e) { 
     $('ul.setup-panel li:eq(1)').removeClass('disabled'); 
     $('ul.setup-panel li a[href="#step-3"]').trigger('click'); 
     $(this).remove(); 
    }) 

}); 

Answer 1

まず動作しない：あなたのようなあなたのhtmlの次のボタンを逃した：

<button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button> 

あなたは両方のサイクルに必要がある場合コンテナと設定は、2つのコンテナのいずれかにこの動作を実装し、もう一方のコンテナを最初のコンテナに従わせることができます。

サイクリックで循環できるようにコードを並べ替えました（updated fiddle here）。

代わりに、新しいイベントと見なされるセットアップでのみ循環する場合は、クリックの代わりにclickwizを使用します。

スニペット：

$(document).ready(function() { 
 

 
    var navListItems = $('ul.setup-panel li a'), 
 
      allWells = $('.setup-content'); 
 

 

 
    allWells.hide().eq(0).show(); 
 
    navListItems.on('click', function(e) 
 
    { 
 
     e.preventDefault(); 
 
     var $target = $($(this).attr('href')), 
 
       $item = $(this).closest('li'); 
 

 
     if (!$item.hasClass('disabled')) { 
 
      navListItems.closest('li').removeClass('active').addClass('disabled'); 
 
      allWells.hide(); 
 
      if ($item.next('li').length == 0) { 
 
      // 
 
      // for cyclic: go back to first ele 
 
      // 
 
       navListItems.eq(0).closest('li').removeClass('disabled').addClass('active'); 
 
       allWells.eq(0).show(); 
 
      } else { 
 
       $item.next('li').removeClass('disabled').addClass('active'); 
 
       $target.next('div').show(); 
 
      } 
 
     } 
 
    }); 
 
    
 
    $('[id^="activate-step-"]').on('click', function(e) { 
 
     var href = '#' + $(this).closest('.setup-content').attr('id'); 
 
     $('ul.setup-panel li a[href="' + href + '"]').trigger('click'); 
 
    }) 
 
});

body{ 
 
    margin-top:20px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="container"> 
 
    <div class="row form-group"> 
 
     <div class="col-xs-12"> 
 
      <ul class="nav nav-pills nav-justified thumbnail setup-panel"> 
 
       <li class="active"><a href="#step-1"> 
 
        <h4 class="list-group-item-heading">Step 1</h4> 
 
        <p class="list-group-item-text">First step description</p> 
 
       </a></li> 
 
       <li class="disabled"><a href="#step-2"> 
 
        <h4 class="list-group-item-heading">Step 2</h4> 
 
        <p class="list-group-item-text">Second step description</p> 
 
       </a></li> 
 
       <li class="disabled"><a href="#step-3"> 
 
        <h4 class="list-group-item-heading">Step 3</h4> 
 
        <p class="list-group-item-text">Third step description</p> 
 
       </a></li> 
 
       <li class="disabled"><a href="#step-4"> 
 
        <h4 class="list-group-item-heading">Step 4</h4> 
 
        <p class="list-group-item-text">Fourth step description</p> 
 
       </a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-1"> 
 
     <div class="col-xs-12"> 
 
      <div class="col-md-12 well text-center"> 
 
       <h1> STEP 1</h1> 
 
       <button id="activate-step-2" class="btn btn-primary btn-lg">Activate Step 2</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-2"> 
 
     <div class="col-xs-12"> 
 
      <div class="col-md-12 well text-center"> 
 
       <h1 class="text-center"> STEP 2</h1> 
 
       <button id="activate-step-3" class="btn btn-primary btn-lg">Activate Step 3</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-3"> 
 
     <div class="col-xs-12"> 
 
      <div class="col-md-12 well text-center"> 
 
       <h1 class="text-center"> STEP 3</h1> 
 
       <button id="activate-step-4" class="btn btn-primary btn-lg">Activate Step 4</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-4"> 
 
     <div class="col-xs-12"> 
 
      <div class="col-md-12 well text-center"> 
 
       <h1 class="text-center"> STEP 4</h1> 
 
       <button id="activate-step-1" class="btn btn-primary btn-lg">Activate Step 1</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
</div>