如何在 jQuery 中遍历 class 中的项目

Question

我想创建一系列文本框，一个接一个出现。我的设置是创建 (HTML) 和隐藏 (jQuery) 的所有框。尽管我想使用 for 循环优化它，但我让它为预定义数量的盒子工作（每个盒子的代码都是使用 id 等编写的）。这是我目前所拥有的：

// Hide all (except first question) at the start
$(".Qs").hide();

// Now reveal next question on button click (button is in previous question)
$(".Qs").each(function(){
    $(".nextButton").click(function(){
        $(this).hide();
        $(".Qs").show();
    });
});

它正在做的是当我点击第一个按钮时显示所有连续的问题......我知道它这样做是因为这条线： $(".Qs").show();

如何让它只显示 Q 中的下一个元素 class？

非常感谢！

Answer 1

如果您的目标是显示第一个隐藏问题，请更改

$(".Qs").show();

至

$(".Qs:hidden:first").show();

此外，您不想在问题的 each 中连接 .nextButton 点击处理程序；一次就够了。 ~~最后，你的第一个代码注释和后面的代码不一致；如果你想隐藏除第一个以外的所有问题，你必须跳过第一个。~~ （你在下面评论说第一个问题没有 Qs class, 所以...)

所以：

// Hide all (except first question) at the start
$(".Qs").hide();

// Now reveal next question on button click (button is in previous question)
$(".nextButton").click(function(){
  $(this).hide();
  $(".Qs:hidden:first").show();
});

请注意，它对 CSS 选择器使用了 jQuery 增强功能，因此不能卸载到浏览器的内置处理中，但因为这是对按钮点击的响应用户，性能成本是难以察觉的。

请注意，这也不关心您单击哪个 .nextButton。要使其特定于特定 .nextButton，我们需要查看您的 HTML。该代码很可能会使用 closest 和 find.

实例：

// Hide all (except first question) at the start
$(".Qs").hide();

// Now reveal next question on button click (button is in previous question)
$(".nextButton").click(function(){
  $(this).hide();
  $(".Qs:hidden:first").show();
});

<div><!-- Note first question doesn't have class -->
  Question 1
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 2
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 3
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 4 (last)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

您可以尝试使用 next() jquery 方法。

// Hide all (except first question) at the start
$(".Qs").hide();

// Now reveal next question on button click (button is in previous question)
$(".nextButton").click(function(){
    $(this).hide();
    $(this).parent().next().show();
});

<div><!-- Note first question doesn't have class -->
  Question 1
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 2
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 3
  <input type="button" class="nextButton" value="Next">
</div>
<div class="Qs">
  Question 4 (last)
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

已测试，按预期工作。

如何在 jQuery 中遍历 class 中的项目

How to iterate through items in a class in jQuery

jquery

loops

toggle

iteration

show