Question

我创建了一个步骤向导，每次按下＆＃34; next＆＃34;按钮步骤向导应删除step1 active并将下一个active设置为步骤2.

我写了这个：

jQuery的：

$('#goto-step-four').click(function () {
    $("#step-one").removeClass();
    $("#step-two").removeClass();
    $("#step-three").removeClass();
    $("#step-four").toggleClass('active');
    $("#step-five").removeClass();
});

步骤向导：

<div class="row">
      <div class="col-xs-12">
          <ul class="nav nav-pills nav-justified thumbnail">
          <li id ="step-one" class="active"><a id="step-one-button">
                  <h4 class="list-group-item-heading">Stap 1</h4>
                  <p class="list-group-item-text">NAW gegevens klant</p>
              </a></li>
              <li id ="step-two" class=""><a id="step-two-button">
                  <h4 class="list-group-item-heading">Stap 2</h4>
                  <p class="list-group-item-text">Selecteer een type</p>
              </a></li>
              <li id="step-three" class=""><a id="step-three-button">
                  <h4 class="list-group-item-heading">Stap 3</h4>
                  <p class="list-group-item-text">Breedte en hoogte</p>
              </a></li>
              <li id="step-four" class=""><a id="step-four-button">
                  <h4 class="list-group-item-heading">Stap 4</h4>
                  <p class="list-group-item-text">Extra's</p>
              </a></li>
              <li id="step-five" class="disabled"><a id="step-five-button">
                  <h4 class="list-group-item-heading">Stap 5</h4>
                  <p class="list-group-item-text">Controleer gegevens</p>
              </a></li>
          </ul>
      </div>
</div>

我觉得这有点乱，应该有更好的方法。我该怎么做才能让这个更干净？

Answer 1

实现此目的的最简单方法是在要分组的所有元素上放置一个公共类。然后，您可以同时调用removeClass()，同时将addClass()调用到您要定位的元素。像这样：

$('#goto-step-four').click(function () {
  $('.active').removeClass('active');
  $('#step-four').addClass('active');
});

.active { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="goto-step-four">Step 4</button><br /><br />

<div class="step" id="step-one">One</div>
<div class="step" id="step-two">Two</div>
<div class="step" id="step-three">Three</div>
<div class="step" id="step-four">Four</div>
<div class="step" id="step-five">Five</div>

更进一步，您可以将其干掉，以便您可以在所有“转到X步骤”按钮上使用单击处理程序：

$('.goto').click(function () {
  $('.step').removeClass('active').eq($(this).index('.goto')).addClass('active');
});

.active { background-color: #CCC; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="goto">Step 1</button>
<button class="goto">Step 2</button>
<button class="goto">Step 3</button>
<button class="goto">Step 4</button>
<button class="goto">Step 5</button><br /><br />

<div class="step-container">
  <div class="step">One</div>
  <div class="step">Two</div>
  <div class="step">Three</div>
  <div class="step">Four</div>
  <div class="step">Five</div>
</div>

Answer 2

尝试Garbage Collector Thread：

{{1}}

您只需要保存活动状态，从所有状态中删除活动状态，然后应用于下一步。

jQuery set class active并删除所有其他活动类

2 个答案: