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>

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

2 个答案: