Dev Faq
0
votes

Seulement montrer le bouton lorsque la classe .active n'est pas le premier enfant

Je crée un formulaire multif étapes à l'aide de JQuery et j'essaie de ne montrer que le bouton #prev code> lorsque la classe active n'est pas sur le premier enfant. Par défaut, j'ai ajouté Affichage: Aucun code> à #PREV code> Pour le masquer sur la charge, mais je suis en difficulté pour l'afficher lorsque le .active code> classe est ajouté sur les autres sections.

Lorsque vous le ciblez dans une instruction IF à l'aide du est (": non (: premier enfant)) code> Ça fonctionne mais ne montre que lorsque la classe active est ajoutée sur # step3 Code>. P>

Quelqu'un peut-il me dire comment vous assurer que le bouton n'est visible que lorsque la classe .active code> est sur chaque section, sauf # step1 code>? xxx pré>

html p> xxx pré>

css p> xxx pré>

jQuery p > 

$('.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');
  }

});

3 commentaires

$ (".steps-inner div: premier enfant") .hasclass ("actif"); Je pense que cela devrait fonctionner

Êtes-vous sûr que le problème est avec ce conditionnel et non le suivant qui définit la classe active sur un élément, que ce soit le premier ou le dernier élément?

Il y a aussi une faute de frappe avec le dernier si à l'aide de = au lieu de ===

3 Réponses :

1
votes

Il y a quelques points à faire pour faire ce travail:

  1. Cachez toutes les étapes qui ne sont pas actives (je suppose que vous le faites déjà et laissez-le sur l'intention d'un exemple d'exemple plus court) li>
  2. Supprimez l'état actif de tous les conteneurs d'étape de fromage Strike> en fait, ce n'est pas nécessaire et était une erreur de mon côté em> li> li>
  3. Mettez à jour l'élément détenu dans la collection de la variable code> active > avec l'étape suivante / précédente en conséquence li>
  4. Déplacez la vérification de l'état du bouton après que LI>
  5. masque le bouton lorsque l'étape active est la première li> ol>

    Vous devrez également gérer le cas lorsque toutes les étapes sont passées, mais cela est hors de portée de cette question. P>

    J'ai également simplifié le code pour vous débarrasser de la redondance . p>

    p> 

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

0 commentaires
0
votes

Essayez quelque chose comme ceci qui veillera également à ce qu'il ya une prochaine étape active pour activer.

p> 

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

0 commentaires
1
votes

Donc, quelques réponses à votre logique.

  1. Correction de la typographie de = code> sur l'autre si. li>
  2. Définissez le actif code> sur le nouveau actif une fois qu'il est ajusté. LI>
  3. Vérifiez si l'actif est le premier élément après fort> il a été ajusté, pas avant, il est donc précis. li>
  4. en tant que bonus, a également ajouté la cachette de la prev si elle est remplacée vers le premier élément. Li> ol>

    p> 

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

0 commentaires

Articles qui pourrait vous intéresser :

Select2 ne s'affiche pas correctement dans le mode bootstrap
datetimepicker ne fonctionne pas avec bootstrap 4?
L'appel Ajax n'affiche pas de réponse en cas de succès
django admin - Comment ajouter du javascript à la fin d'un fichier