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

I'm newbie in javascript and I want to render a form when user clicks a button, I tried different methods but I wasn't successful. Here is the code:

我是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>

I'm using this in threaded comments. I just want to render this form when user clicks reply button and otherwise this form should not be displayed.

我在线程评论中使用它。我只想在用户点击回复按钮时呈现此表单,否则不应显示此表单。

2 个解决方案

#1

As @des said, you could use a#reply as a trigger. In jquery it only needs a couple of lines of code:

正如@des所说,你可以使用#reply作为触发器。在jquery中,它只需要几行代码:

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

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


 });

Example

#2

You can hide form using css:

你可以使用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>

and then show it when user clicks reply button:

然后在用户点击回复按钮时显示:

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

UPDATE Now as I saw your HTML:

更新现在我看到你的HTML:

Firstly, never use one id for more than one element, use class instead:

首先,永远不要为一个以上的元素使用一个id,而是使用class:

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

Now you can use next() to toggle form:

现在您可以使用next()来切换表单:

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

#1