javascript - 单击链接时如何使表单呈现？

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


 });​

例子