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


 });

Example

单击链接时如何进行表单渲染？

2 个答案: