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

Posted 2023-02-25

【中文标题】jquery 仅显示具有相同类的下一个 div

【英文标题】：jquery show only next div with same class

【发布时间】：2016-12-15 10:35:21

【问题描述】：

我正在尝试使用 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/ 您可以看到它是如何同时显示第 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>

【参考方案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

【参考方案2】：

可能很简单：

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

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

【参考方案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>

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

【参考方案4】：

试试下面的代码：

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


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

【参考方案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>

【参考方案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>