Шаг за шагом HTML, добавив в настройках

Question

У меня есть веб-сайт, на котором пользователь шаг за шагом просматривает веб-сайт, чтобы просмотреть более подробную информацию (например, путешествие клиента).

У меня настроен код basi c, так что это работает хорошо. Однако на некоторых страницах я хочу, чтобы у них были опции, которые затем определяют маршрут, по которому они go вниз.

Например, на третьем шаге они могут выбрать вариант 1 или вариант 2. Если они выбирают вариант 1 тогда это покажет остальные шаги только для варианта 1. С тем же самым, если они нажимают вариант 2.

Я создал здесь кодовую ручку, которая, надеюсь, имеет немного больше смысла: - https://codepen.io/scottYg55/pen/PowMawY

Как вы можете видеть, Шаг 3, где они могут выбрать вариант. Я также буду добавлять дополнительные функциональные возможности некоторых других шагов.

Я попытался использовать функцию remove(), поэтому, когда пользователь щелкает опцию 1, это удаляет все div опции 2. Однако это не работает правильно.

$(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>

У кого-нибудь есть идеи?

Answer 1

Не уверен, что понимаю вашу проблему, но remove() на самом деле работает нормально.

Я добавил дополнительный шаг, включающий все ваши опции, иначе он покажет только первый div. Если вы выберете опцию 1 сейчас, она покажет все варианты опции 1. Вы можете сделать то же самое с опцией 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>