jquery - 显示/隐藏具有相同类的 div - jquery

Question

我有 1 个 div，其中包含 3-5 个具有相同类的 div。 div 下面是一个 anchor 。我希望当单击此 anchor 时，它将隐藏第一个 div，然后显示第二个。再次单击将显示下一个，依此类推。我已在除第一个 div 之外的所有 div 上设置了 display:none ，因此当前仅显示一个。我只是不知道如何在单击 anchor 时隐藏第一个，然后显示第二个，然后是第三个，然后是下一个。

<div class="container-div">
<div class="inner-div">...</div>
<div class="inner-div" style="display:none;">...</div>
<div class="inner-div" style="display:none;">...</div>
<a href="#" class="more">More</a>
</div>

因此，当单击 more anchor 时，它会一次显示一个内部 div。任何建议或想法将不胜感激。另外，我想使用 jquery 来完成此任务。

Answer 1

你可以这样做:

$(".inner-div:visible").hide().next().show();

这将找到该类的第一个可见 div，然后导航到下一个子级并显示它。

这假设:

1. div 是 sibling
2. 如果显示最后 div，单击按钮只会将其隐藏，不显示任何内容。

循环回到开头有点棘手。我可能会做这样的事情:

var next = $(".inner-div:visible").hide().next();
if (next.length > 0)
    next.show();
else
    $(".inner-div:first").show();

要在显示最后一个 div 后简单地停止循环，您可以这样做:

var current = $(".inner-div:visible");
if (current.next().length > 0)
    current.hide().next().show();