Question

我希望创建一系列文本框，一个会出现在另一个文本框之后。我的设置是我创建了所有框（HTML）和隐藏（jQuery）。我让它工作了预定义数量的盒子（每个盒子的代码都使用id等编写）虽然我想用for循环优化它。这就是我到目前为止所做的：

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

它正在做的是当我点击第一个按钮时显示所有连续的问题.....我知道这是因为这行： $（＆＃34; .Qs＆＃34）显示（）;

如何让它只显示Qs类中的下一个元素？

非常感谢！

Answer 1

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

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

到

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

另外，您不想在问题中.nextButton内部each点击处理程序;只需一次即可。 ~~最后，你的第一个代码注释和它之后的代码并不相同;如果你想隐藏除第一个之外的所有内容，你必须跳过第一个。~~ （你在下面评论说第一个问题没有Qs类，所以...）

所以：

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

实例：

＆＃13;

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

＆＃13;

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

＆＃13;

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中迭代类中的项

2 个答案: