jquery 仅显示具有相同 class 的下一个 div

Question

我正在尝试使用 jquery 执行一系列步骤，但未能达到我想要的结果。

我有 3 个步骤，class 的 .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 行，不是全部。

这是 fiddle：https://jsfiddle.net/vsomcag2/1/ 你可以看到它是如何同时显示第 2 步和第 3 步的。

我不能使用 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>

jquery 仅显示具有相同 class 的下一个 div

jquery show only next div with same class

javascript

jquery

html

next

jquery-traversing