您需要根据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

可能很简单：

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

演示：https://jsfiddle.net/vsomcag2/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>

基本上，我所做的是将单击的元素传递给函数，该函数是单个元素而不是元素数组。

尝试以下代码：

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

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

首先，您获取当前步骤（谁是可见的），然后检查在该步骤之后是否还有一个步骤，如果存在则显示该步骤，并隐藏当前步骤。

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>

我稍微修改了你的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>