jquery显示只有下一个div与同一类

Question

我试图用jQuery做一系列步骤，但我无法实现我想要的结果。

我有3个步骤，一类.wiki-step-加上一个数字。 我的JavaScript是这一个：

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

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

它正常工作，只有2个步骤，但我发现，如果我添加第三个，jQuery的(next)显示一次所有其它步骤，但我只想展示下一个div，不是全部。

这里是一个小提琴：https://jsfiddle.net/vsomcag2/1/ 你可以看到它是如何显示第二步和第三步一次。

我不能使用nextUntil()我想，我想我应该使用某种计数器，但我不知道从哪里开始。我想避免指定数字，因为我希望能够在不编辑js的情况下添加或删除步骤。

任何帮助，非常感谢。

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

您需要按照该对象，以获取参考clicked对象a和show hide。

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是的jsfiddle

Answer 2

可能是非常简单的：

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

演示：https://jsfiddle.net/vsomcag2/3/

Answer 3

如果你希望只一次一个告诉你可以使用这个：

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>

基本上什么我做的是通过点击的元件，其是一个单一的元素，而不是元件的阵列的功能。

Answer 4

尝试下面的代码：

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

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

Answer 5

首先，你得到的当前步骤，谁是可见的，然后检查是否有一个之后的一个步骤，那么如果它存在表现出来，而隐藏当前一个。

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

我稍加修改你的HTML CSS &，因为我相信一个数据属性非常适用于这种类型的东西。

此外，我刚刚使用暴力，隐藏所有内容，然后显示您需要的页面。我经常发现这种方法导致更少的错误，就像React在视图成为状态时的工作方式一样。因此，为了使这个阶段有所需要，只需要很少的修改。

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>