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 next函数：

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

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

切换动态创建的div

2 个答案: