jquery - 一步一步的 HTML，添加选项

Question

我有一个网站，用户将逐步浏览网站以查看更多详细信息（如客户旅程）。

我已经设置了基本代码，所以效果很好。然而，在某些页面上，我希望他们有选项，然后确定他们走的路线。

例如，在第三步，他们可以选择选项 1 或选项 2。如果他们选择选项 1，那么这将仅显示选项 1 的其余步骤。如果他们单击选项 2，则相同。

我在这里创建了一个 codepen，希望它更有意义： - https://codepen.io/scottYg55/pen/PowMawY

如您所见，第 3 步是他们可以选择选项的地方。我还将添加一些其他步骤的更多选项功能。

我尝试过使用该remove()功能，因此当用户单击选项 1 时，它会删除所有选项 2 div。但是，这无法正常工作。

$(function() {
  var $sections = $('.step');

  function navigateTo(index) {
    // Mark the current section with the class 'current'
    $sections
      .removeClass('current')
      .eq(index)
      .addClass('current');
    // Show only the navigation buttons that make sense for the current section:
  }

  function curIndex() {
    // Return the current index by looking at which section has the class 'current'
    return $sections.index($sections.filter('.current'));
  }

  // Previous button is easy, just go back
  $('.previous').click(function() {
    navigateTo(curIndex() - 1);
  });

  // Next button goes forward iff current block validates
  $('.next').click(function() {
    if (
      $(this).hasClass("option-1-click")) {}
    navigateTo(curIndex() + 1);
  });

  navigateTo(0); // Start at the beginning
});

.step {
  display: none;
}

.step.current {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all-steps">
  <div class="step">Step 1
    <div class="main-button"><a class="next" href="#">Next</a></div>
  </div>
  <div class="step">Step 2
    <div class="main-button"><a class="next" href="#">Next</a></div>
  </div>
  <div class="step">Step 3<br>Choose an option
    <div class="main-button"><a class="next option-1-click" href="#">Option 1</a></div>
    <div class="main-button"><a class="next option-2-click" href="#">Option 2</a></div>
  </div>
  <div class="step option-1">Option 1 details<a class="next" href="#">Next</a></div>
  <div class="step option-1">Option 1 details<a class="next" href="#">Next</a></div>
  <div class="step option-1">Option 1 details<a class="next" href="#">Next</a></div>
  <div class="step option-2">Option 2 details<a class="next" href="#">Next</a></div>
  <div class="step option-2">Option 2 details<a class="next" href="#">Next</a></div>
  <div class="step option-2">Option 2 details<a class="next" href="#">Next</a></div>
</div>

有没有人有任何想法？

标签： jqueryhtmlcss

Answer 1

不确定是否理解您的问题，但remove()实际上工作正常。

我添加了一个额外的步骤，包括您的所有选项，否则它将仅显示第一个 div。如果您现在选择选项 1，它将显示所有选项 1 div。您可以对选项 2 执行相同操作。

编辑：我看到你计划有一个上一个按钮。然后我建议您使用hide()，而不是remove()这样您就可以随时再次显示其他选项。

$(function() {
  var $sections = $('.step');

  function navigateTo(index) {
    // Mark the current section with the class 'current'
    $sections
      .removeClass('current')
      .eq(index)
      .addClass('current');
    // Show only the navigation buttons that make sense for the current section:
  }

  function curIndex() {
    // Return the current index by looking at which section has the class 'current'
    return $sections.index($sections.filter('.current'));
  }

  // Previous button is easy, just go back
  $('.previous').click(function() {
    navigateTo(curIndex() - 1);
  });

  // Next button goes forward iff current block validates
  $('.next').click(function() {
    if ($(this).hasClass("option-1-click")) {
        $('.option-2').remove();
      }
    if ($(this).hasClass("option-2-click")) {
        $('.option-1').remove();
      }
    navigateTo(curIndex() + 1);
  });

  navigateTo(0); // Start at the beginning
});

.step {
  display: none;
}

.step.current {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="all-steps">
  <div class="step">Step 1
    <div class="main-button"><a class="next" href="#">Next</a></div>
  </div>
  <div class="step">Step 2
    <div class="main-button"><a class="next" href="#">Next</a></div>
  </div>
  <div class="step">Step 3<br>Choose an option
    <div class="main-button"><a class="next option-1-click" href="#">Option 1</a></div>
    <div class="main-button"><a class="next option-2-click" href="#">Option 2</a></div>
  </div>
  <div class="step">
    <div class="option-1">Option 1 details (1)<a class="next" href="#">Next</a></div>
    <div class="option-2">Option 2 details (1)<a class="next" href="#">Next</a></div>
  </div>
  <div class="step">
    <div class="option-1">Option 1 details (2)<a class="next" href="#">Next</a></div>
    <div class="option-2">Option 2 details (2)<a class="next" href="#">Next</a></div>
  </div>
  <div class="step">
    <div class="option-1">Option 1 details (3)<a class="next" href="#">Next</a></div>
    <div class="option-2">Option 2 details (3)<a class="next" href="#">Next</a></div>
  </div>
</div>