單擊鏈接時如何使表單呈現？

Question

我是javascript的新手，我想在用戶單擊按鈕時呈現表單，我嘗試了其他方法，但未成功。 這是代碼：

 <a href="" id="reply">Reply</a>
 <form action="" method="post" >
     <textarea name="comment" class="comment_textarea"></textarea>
     <input type="hidden" name="id" value="5"> 
     <input type="submit" class="btn"  value="Reply">
 </form>

我在線程注釋中使用它。 我只想在用戶單擊“答復”按鈕時呈現此表單，否則不應顯示此表單。

Answer 1

您可以使用CSS隱藏表單：

 <a hred="" id="reply">Reply</a>
 <form action="" method="post" id="reply-form" style="display:none">
     <textarea name="comment" class="comment_textarea"></textarea>
     <input type="hidden" name="id" value="5"> 
     <input type="submit" class="btn"  value="Reply">
 </form>

然后在用戶單擊回復按鈕時顯示它：

$('#reply').click(function() { $('#reply-form').toggle(); });

更新現在，當我看到您的HTML時：

首先，請勿將一個ID用作多個元素，而應使用class：

<a hred="" class="reply">Reply</a>

現在，您可以使用next()來切換表單：

//  for each element with class reply, find next form element and toggle visibility
$('.reply').click(function() { $(this).next('form').toggle(); });​​​​

Answer 2

作為@des說，你可以使用a#reply作為觸發。 在jquery中，它只需要幾行代碼：

  $('.reply').click(function() { 

  $(this).parent().find('.reply-form').toggle(); 


 });​

例