javascript - JQuery 使用 Onclick 函数在多条件语句中删除和添加类

Question

我目前正在制作多级联系表单。它完美地改变到下一个级别，但我对进度条有疑问。当级别发生变化时，我似乎无法将“事件”类传递到下一步。

下面是为演示而创建的示例 HTML。请帮忙

$(document).ready(function() {

  // this works. It adds "active" to the step 1 on window load
  if ($(".section1").hasClass('current-section')) {
    $(".step1").addClass("active");
  }

  //this is meant to remove the class "active" from step 1 and add to step 2 but it doesn't work
  $(".btn1").click(function() {
    if ($(".section2").hasClass('current-section')) {
      $(".step1").removeClass("active");
      $(".step2").addClass("active");
    }
  });

  //this is meant to remove the class "active" from step 2 and add to step 3 but it doesn't work
  $(".btn2").click(function() {
    if ($(".section3").hasClass('current-section')) {
      $(".step2").removeClass("active");
      $(".step3").addClass("active");
    }
  });
});

li.active {
  background: orange;
}

div.current-section {
  background: limegreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="step1">Step 1</li>
  <li class="step4">Step 2</li>
  <li class="step3">Step 2</li>
</ul>

<div class="container">
  <div class="section1 current-section">
    section 1
    <button class="btn1">Next</button>
  </div>

  <div class="section2">
    section 2
    <button class="btn2">Next</button>
  </div>

  <div class="section3">
    section 3
  </div>
</div>

Answer 1

您需要研究 DRY - 不要重复自己

• 对每个相同的类型使用相同的类
• 如果需要直接访问项目，请使用项目 ID
• 使用 next() 和 Parent() 访问同级

$(document).ready(function() {

  $(".btn").click(function() {
    const $parent = $(this).parent()
    const $next = $(this).parent().next();
    const $prev = $(this).parent().prev();
    const nextBut = $(this).text() === "Next"
    if ($parent.is('.current-section')) {
      $parent.removeClass('current-section');
      if (nextBut && $next) $next.addClass('current-section');
      else if ($prev) $prev.addClass('current-section');
    }
    const $step = $(".step.active")
    const $prevStep = $step.prev();
    const $nextStep = $step.next();
    $step.removeClass('active');
    if (nextBut && $nextStep) $nextStep.addClass('active');
    else if ($prevStep) $prevStep.addClass('active');
  });

});

li.active {
  background: orange;
}

.section {
  display: none;
}

div.current-section {
  background: limegreen;
}

.current-section {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="step active">Step 1</li>
  <li class="step">Step 2</li>
  <li class="step">Step 2</li>
</ul>

<div class="container">
  <div class="section current-section">
    section 1
    <button class="btn">Next</button>
  </div>

  <div class="section">
    section 2
    <button class="btn">Prev</button>
    <button class="btn">Next</button>
  </div>

  <div class="section">
    section 3
    <button class="btn">Prev</button>
  </div>
</div>