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的情况下添加或删除步骤。

非常感谢任何帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

可能非常简单：

select c.Vehicle, 
sum(case when DATE_FORMAT(Fueldate, "%c") = 1 then FuelLitters end) as JAN,
sum(case when DATE_FORMAT(Fueldate, "%c") = 2 then FuelLitters end) as FEB,
sum(case when DATE_FORMAT(Fueldate, "%c") = 3 then FuelLitters end) as MAR,
sum(case when DATE_FORMAT(Fueldate, "%c") = 4 then FuelLitters end) as APR,
sum(case when DATE_FORMAT(Fueldate, "%c") = 5 then FuelLitters end) as MAY,
sum(case when DATE_FORMAT(Fueldate, "%c") = 6 then FuelLitters end) as JUN,
sum(case when DATE_FORMAT(Fueldate, "%c") = 7 then FuelLitters end) as JUL,
sum(case when DATE_FORMAT(Fueldate, "%c") = 8 then FuelLitters end) as AUG,
sum(case when DATE_FORMAT(Fueldate, "%c") = 9 then FuelLitters end) as SEP,
sum(case when DATE_FORMAT(Fueldate, "%c") = 10 then FuelLitters end) as OCT,
sum(case when DATE_FORMAT(Fueldate, "%c") = 11 then FuelLitters end) as NOV,
sum(case when DATE_FORMAT(Fueldate, "%c") = 12 then FuelLitters end) as `DEC`
from COSTING c
group by Vehicle

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

Answer 3

如果您想一次只显示一个，可以使用它：

＆＃13;

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));
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

首先，你得到当前步骤，谁是可见的，然后检查是否有一个步骤，然后显示它是否存在，并隐藏当前步骤。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 6

我稍微修改了你的HTML＆amp; 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只显示同一个类的下一个div

6 个答案: