切换动态创建的div [英] Toggle dynamically created divs

问题描述

我正在编写自己的轻量级博客平台（我试图学习PHP& jQuery，所以我不只是想使用Wordpress）。使用PHP，我有一个分页系统，每页显示5篇博文。在我的while循环中，我想要有一个链接，指出发表评论，点击后，将打开一个包含文本框以输入评论的DIV。我正在使用的当前代码打开页面上的所有5个评论DIV。我需要能够给每个这些commif DIV提供一个唯一的ID（基于我假设的博客文章ID），并将其放入我的jquery切换函数中，以便在单击链接时只打开一个注释DIV，而不是全部他们。谁能帮帮我吗？

I'm writing my own lightweight blogging platform (I'm trying to learn PHP & jQuery so I don't just want to use Wordpress). Using PHP, I have a pagination system that shows 5 blog posts per page. Within my while loop, I want to have a link that says "Leave a Comment" which, when clicked, will open up a DIV that has a textbox to input a comment. The current code i'm using opens up ALL 5 comment DIVs on the page. I need to be able to give each of those commment DIV's a unique ID (based on the blog post's ID I assume) and put that in my jquery toggle function so that only one comment DIV is opened when the link is clicked, not all of them. Can anyone please help me?

这是我的jQuery，它打开页面上的所有切换的div：

Here's my jQuery which opens up ALL toggled divs on the page:

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

以下是我的while循环中显示博客文章和链接的代码：

And here's the code in my while loop which displays the blog post and the link:

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

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

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

I don't need help with the form stuff within the commentBox div, I just need help with the jQuery to make each of the 5 comment boxes on the page unique, and all of them toggle-able individually, instead of one link opening all 5 toggle DIVs on the page, like what happens now. Any help anyone could give me would be greatly appreciated.

推荐答案

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

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

这篇关于切换动态创建的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！