如何使用jquery显示隐藏的表单字段

Question

我有三个输入字段，用于收集用户的电话号码。 我显示一个字段并隐藏另外两个字段。 我在其下方放置了一个链接（添加家庭电话），当用户单击链接时，它会显示隐藏的输入字段。 当点击显示最后一个输入字段时，我在它下面再添加了一个链接。

  <input type="text" />
  <a href="#" class="show" >Add Home Number</a>
  <div style="display: none">
         <input type="text" />
  <a href="#" class="show" >Add Office Number</a>
  </div>               
  <div style="display: none">
         <input type="text" />
  </div>               

jquery看起来像这样..

<script>
    $(function(){ 
    $(".show").click(function () {
    $(this).next("div").show("slow");
    });
    });
</script>

第一个链接可以正常工作，但是第二个链接不能工作。

我感谢所有帮助。

谢谢。

Answer 1

你必须使用每个功能：

像这样：

$(".show").each($(this).click(function () {
    $(this).next("div").show("slow");
    })
);

Answer 2

.next()仅选择下一个兄弟元素。 您的链接没有后续的兄弟，因为您之后立即关闭父元素（div）。 您需要选择div的下一个兄弟：

<script>
    $(function(){ 
        $(".show").click(function () {
            $(this).parent().next("div").show("slow");
        });
    });
</script>