Блог

Главная - Вопросы по программированию - Показывать кнопку только тогда, когда .активный класс не является первым дочерним

Показывать кнопку только тогда, когда .активный класс не является первым дочерним

#jquery #css

#jquery #css

Вопрос:

Я создаю многоступенчатую форму с помощью jQuery и пытаюсь показывать #prev кнопку только тогда, когда активный класс не находится в первом дочернем классе. По умолчанию я добавил display:none в #prev , чтобы скрыть его при загрузке, но я изо всех сил пытаюсь отобразить его, когда .active класс добавляется в другие разделы.

При нацеливании на это в операторе if с использованием is(":not(:first-child)) это работает, но отображается только при добавлении активного класса в #step3 .

Кто-нибудь может сказать мне, как убедиться, что кнопка видна только тогда, когда класс .active находится во всех разделах, кроме #step1 ? 

 if(active.is(":not(:first-child)")) {
    $('#prev').show();
  }

HTML

 <div class="multi-step-wrapper" id="multi-step">
            <div id="progressbar">
                <span></span>
            </div>
            <div class="steps-inner">
                <div class="multi-step-section active" id="step1"></div>
                <div class="multi-step-section" id="step2"></div>
                <div class="multi-step-section" id="step3"></div>
                <div class="multi-step-section" id="step4"></div>
                <div class="multi-step-section" id="step5"></div>
                <div class="multi-step-section" id="step6"></div>
                <div class="multi-form-actions">
                    <button id="prev" type="button">Back</button>
                    <button id="next" type="button">Next</button>
                </div>
            </div>
        </div>

CSS

 #prev {
  display: none;
}

Jquery

 $('.multi-form-actions button').on('click', function() {

  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  if(active.is(":not(:first-child)")) {
    $('#prev').show();
  }

  active.removeClass('active');

  if(el == 'prev') {
      active.prev('.multi-step-section').addClass('active');
  }
  else if(el = 'next') {
      active.next('.multi-step-section').addClass('active');
  }

});

Комментарии:

1. $( «.steps-inner div: first-child» ).hasClass («активный»); Я думаю, это должно сработать

2. Вы уверены, что проблема связана с этим условием, а не со следующим условием, которое устанавливает активный класс для элемента, независимо от того, является ли это первым или последним элементом?

3. Также есть опечатка с последним if использованием = вместо ===

Ответ №1:

Есть несколько вещей, которые вам нужно сделать, чтобы заставить это работать:

  1. Скрыть все шаги, которые не активны (я предполагаю, что вы это уже делаете, и опустили это ради более короткого примера кода)
  2. Удалите активное состояние из всех контейнеров с шагами-побратимами на самом деле, это не обязательно и было ошибкой с моей стороны
  3. Обновите элемент, хранящийся в коллекции active переменной, соответствующим следующим / предыдущим шагом
  4. переместите проверку состояния кнопки после этого
  5. скрывать кнопку, когда активный шаг является первым

Вам также придется обрабатывать случай, когда все шаги выполнены, но это выходит за рамки этого вопроса.

Я также упростил код, чтобы избавиться от некоторой избыточности.

 $('.multi-form-actions button').on('click', function() {
  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  // also remove active class from siblings
  active.removeClass('active');

  if(el === 'prev' || el === 'next') { // in case you have any other buttons
    active = active[el]('.multi-step-section').addClass('active');;
  }
  
  // show or hide prev button depending on condition
  $('#prev')[active.is(":not(:first-child)") ? 'show' : 'hide']();
});  
 #prev,
.multi-step-section {
  display: none;
}

.multi-step-section.active {
  display: block;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  	
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">step1</div>
    <div class="multi-step-section" id="step2">step2</div>
    <div class="multi-step-section" id="step3">step3</div>
    <div class="multi-step-section" id="step4">step4</div>
    <div class="multi-step-section" id="step5">step5</div>
    <div class="multi-step-section" id="step6">step6</div>
    <div class="multi-form-actions">
      <button id="prev" type="button">Back</button>
      <button id="next" type="button">Next</button>
    </div>
  </div>
</div>

Ответ №2:

Итак, несколько исправлений в вашей логике.

  1. Исправлена опечатка = в else if.
  2. Установите active на новый активный, как только он будет настроен.
  3. Проверьте, является ли active первым элементом после его настройки, а не раньше, чтобы он был точным.
  4. В качестве бонуса также добавлено скрытие предыдущего элемента, если он будет изменен обратно на первый элемент.

 $('.multi-form-actions button').on('click', function() {
  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');

  active.removeClass('active');

  if (el == 'prev') {
    active = active.prev('.multi-step-section').addClass('active');
  } else if (el == 'next') {
    active = active.next('.multi-step-section').addClass('active');
  }

  if (active.is(":not(:first-child)")) {
    $('#prev').show();
  } else {
    $('#prev').hide();
  }
});  
 #prev {
  display: none;
}

.active { color: red; }  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
  <div id="progressbar">
    <span></span>
  </div>
  <div class="steps-inner">
    <div class="multi-step-section active" id="step1">a</div>
    <div class="multi-step-section" id="step2">b</div>
    <div class="multi-step-section" id="step3">c</div>
    <div class="multi-step-section" id="step4">d</div>
    <div class="multi-step-section" id="step5">e</div>
    <div class="multi-step-section" id="step6">f</div>
    <div class="multi-form-actions">
      <button id="prev" type="button">Back</button>
      <button id="next" type="button">Next</button>
    </div>
  </div>
</div>

Ответ №3:

Попробуйте что-то подобное, что также обеспечит следующий активный шаг для активации.

 $('.multi-form-actions button').on('click', function() {

  var el = $(this).attr('id');
  var active = $('.multi-step-section.active');
  var nextActive; 

  if(el == 'prev') {
    nextActive = active.prev('.multi-step-section');
  }
  else if(el = 'next') {
    nextActive = active.next('.multi-step-section');
  }

  if (nextActive.length > 0) {
    active.removeClass('active');

    if(nextActive.is(":first-child")) {
      $('#prev').hide();
    }
    else {
      $('#prev').show();
    }

    nextActive.addClass('active');  
  }
});  
 #prev {
  display: none;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multi-step-wrapper" id="multi-step">
    <div id="progressbar">
        <span></span>
    </div>
    <div class="steps-inner">
        <div class="multi-step-section active" id="step1"></div>
        <div class="multi-step-section" id="step2"></div>
        <div class="multi-step-section" id="step3"></div>
        <div class="multi-step-section" id="step4"></div>
        <div class="multi-step-section" id="step5"></div>
        <div class="multi-step-section" id="step6"></div>
        <div class="multi-form-actions">
            <button id="prev" type="button">Back</button>
            <button id="next" type="button">Next</button>
        </div>
    </div>
</div>