jquery afficher seulement la prochaine div avec la même classe

Question

J'essaie de faire une séquence d'étapes avec jquery mais je ne parviens pas à atteindre le résultat que je veux.

J'ai 3 étapes, avec une classe de .wiki-step- plus un nombre. mon javascript est celui-ci:

function stepping() { 
    var stepButton = $("a.button"); 
    var step = $("[class*='wiki-step-']"); 
    stepButton.closest(step).hide().next(step).show(); 
} 

$("a.button").on("click",function(){ 
    stepping(); 
}); 

Il fonctionne correctement avec seulement deux étapes, mais je l'ai remarqué que si j'ajouter un troisième, le jquery (next) montre toutes les autres étapes à la fois, mais je veux montrer que le div suivant en ligne, pas tous.

Voici un violon: https://jsfiddle.net/vsomcag2/1/ vous pouvez voir comment il montre la 2ème et 3ème étape à la fois.

Je ne peux pas utiliser nextUntil() Je suppose que je devrais utiliser un compteur de quelque sorte mais je ne sais pas par où commencer. Je voudrais éviter de spécifier des nombres parce que je voudrais pouvoir ajouter ou enlever des étapes sans éditer le js.

Toute aide est grandement appréciée.

function stepping() { 
 
     var stepButton = $("a.button"); 
 
     var step = $("[class*='wiki-step-']"); 
 
     stepButton.closest(step).hide().next(step).show(); 
 
    } 
 

 
    $("a.button").on("click",function(){ 
 
     stepping(); 
 
    });

div[class*="wiki-step-"] { 
 
     display: none; 
 
     width: 500px; 
 
     height: 500px; 
 
     border:1px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wiki-step-1" style="display:block"> 
 
<h1>step 1</h1> 
 
<a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-2"> 
 
    <h1>step 2</h1> 
 
<a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-3"> 
 
    <h1>step 3</h1> 
 
</div>

Answer 1

Vous devez faire référence à l'objet clickeda et show hide selon cet objet.

function stepping(obj) { 
    var stepButton = $(obj); 
    var step = $("[class*='wiki-step-']"); 
    stepButton.closest(step).hide().next(step).show(); 
} 

$("a.button").on("click", function() { 
    stepping(this); 
}); 

Here est jsFiddle

Answer 2

Peut-être assez simple:

$("a.button").on("click",function(){ 
     $(this).parent().hide(); 
     $(this).parent().next().show(); 
    }); 

Démo: https://jsfiddle.net/vsomcag2/3/

Answer 3

Si vous voulez montrer qu'un seul à la fois, vous pouvez utiliser ceci:

function stepping(elem) { 
 
    var step = $("[class*='wiki-step-']"); 
 
    elem.closest(step).hide().next(step).show().next(step).hide(); 
 
} 
 

 
$("a.button").on("click", function() { 
 
    stepping($(this)); 
 
});

div[class*="wiki-step-"] { 
 
    display: none; 
 
    width: 500px; 
 
    height: 500px; 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wiki-step-1" style="display:block"> 
 
    <h1>step 1</h1> 
 
    <a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-2"> 
 
    <h1>step 2</h1> 
 
    <a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-3"> 
 
    <h1>step 3</h1> 
 
</div>

En fait ce que je fais est passe l'élément cliqué à la fonction qui est un seul élément plutôt qu'un ensemble d'éléments.

Answer 4

Essayez le code suivant:

function stepping(self) { 
    var step = $("[class*='wiki-step-']"); 
    $(self).closest(step).hide().next(step).show(); 
} 

$("a.button").on("click",function(){ 
    stepping(this); 
}); 

Answer 5

D'abord, vous obtenez l'étape actuelle, qui est visible, vérifier s'il y a un pas après que l'on, montre alors si elle existe, et cacher l'actuel .

function stepping() { 
 
     //var stepButton = $("a.button"); 
 
     var currentStep = $("[class^='wiki-step-']:visible") ; 
 
     var nextStep = $(currentStep).next("[class^='wiki-step-']"); 
 
     if(nextStep.length>0){ 
 
      currentStep.hide(); 
 
      nextStep.show();  
 
     } 
 
     //var step = $("[class*='wiki-step-']"); 
 
     //stepButton.closest(step).hide().next(step).show(); 
 
    } 
 

 
    $("a.button").on("click",function(){ 
 
     stepping(); 
 
    });

div[class*="wiki-step-"] { 
 
     display: none; 
 
     width: 500px; 
 
     height: 500px; 
 
     border:1px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wiki-step-1" style="display:block"> 
 
<h1>step 1</h1> 
 
<a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-2"> 
 
    <h1>step 2</h1> 
 
<a href="#" class="button">next</a> 
 
</div> 
 

 
<div class="wiki-step-3"> 
 
    <h1>step 3</h1> 
 
</div>

Answer 6

J'ai légèrement modifié votre code HTML CSS &, comme je crois un attribut de données fonctionne bien pour ce type de choses.

Aussi, je viens d'utiliser une force brute, tout cacher, puis montrer la page dont vous avez besoin. Je trouve souvent que cette approche conduit à moins d'erreurs, d'une certaine manière c'est comme comment fonctionne React quand la vue devient un état.En tant que tel pour en faire une étape préalable nécessiterait très peu de modification.

function stepping() { 
 
    var nextStep = ($(this).closest('[data-step]'). 
 
    attr('data-step')|0) + 1; 
 
    $('[data-step]').addClass('hidden'); 
 
    $('[data-step=' + nextStep+']').removeClass('hidden'); 
 
} 
 

 
$("a.button").on("click",stepping);

[data-step] { 
 
    width: 500px; 
 
    height: 500px; 
 
    border:1px solid red; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div data-step="1"> 
 
    <h1>step 1</h1> 
 
    <a href="#" class="button">next</a> 
 
</div> 
 

 
<div data-step="2" class="hidden"> 
 
    <h1>step 2</h1> 
 
    <a href="#" class="button">next</a> 
 
</div> 
 

 
<div data-step="3" class="hidden"> 
 
    <h1>step 3</h1> 
 
</div>