切换动态创建的div

Question

我正在编写自己的轻量级博客平台(我正在尝试学习PHP和jQuery,所以我不只是想使用Wordpress).使用PHP,我有一个分页系统,每页显示5篇博文.在我的while循环中,我希望有一个"发表评论"的链接,当点击它时,会打开一个有文本框输入评论的DIV.我正在使用的当前代码在页面上打开所有5个评论DIV.我需要能够为每个提交DIV提供一个唯一的ID(基于我假设的博客文章ID)并将其放入我的jquery切换功能中,以便在单击链接时只打开一个注释DIV,而不是全部他们.谁能帮帮我吗？

这是我的jQuery,它在页面上打开所有切换的div:

<script type="text/javascript"> 
   $(document).ready(function() {  
     $(".toggleCommentBox").click(function() {
       $(".commentBox").toggle()
     });  
   });      
</script>

这是我的while循环中的代码,它显示了博客文章和链接:

<a href = "#" class = "toggleCommentBox">Leave a Comment</a>

<div class = "commentBox" style = "display:none;">
    ...Form stuff in here
</div>

我不需要帮助注释框div中的表单内容,我只需要帮助jQuery就可以使页面上的每个5个注释框都是唯一的,并且所有这些注释框都可以单独切换,而不是一个链接打开所有5切换页面上的DIV,就像现在发生的一样.任何人都可以给我的任何帮助将不胜感激.

Answer 1

尝试这样的事情

<script type="text/javascript"> 
 $(document).ready(function() {  
 $(".toggleCommentBox").each(function{

   var getId = $(this).attr('getId');
   $(this).click(function(){

        $("#commentBox"+getId).toggle();
     })
  })
});      

<a href = "#" class = "toggleCommentBox" getId='1' >Leave a Comment</a>

<div class = "commentBox" style = "display:none;" id="commentBox1">
...Form stuff in here
</div>

希望你明白我想说的话

Answer 2

使用jquery下一个函数：

<script type="text/javascript"> 
   $(document).ready(function() {  
     $(".toggleCommentBox").click(function() {
       $(this).next(".commentBox").toggle()
     });  
   });      
</script>

http://api.jquery.com/next/