如何使用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>