可折叠面板，增加它'；她每次都在我的圈子里 - Collapsible Panel that increases it's id every time in my loop

我有可折叠面板，这是它的标题，

<div id="CollapsiblePanel1" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
     <div class="CollapsiblePanelContent">
       Content 
     </div>
<div>

现在我从我的DB中获得内容，每次获得更多内容时，我都会进入新的CollapsiblePanel，我只需要知道如何将id="CollapsiblePanel1"增加为id="CollapsiblePanel2"和id="CollapsiblePanel3"等等。

好的，我已经更新了页面的所有代码，希望你能在这里得到我的观点

<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var index = 1;  
function update() {
    document.getElementById('CollapsiblePanel'+index).id = 'CollapsiblePanel'+(index+1);
    index++;
}
</script>
<?php
    $getBlogers ="select * from blogs where active=1";
    $result = $db -> query ($getBlogers) or die ($db->error);
?>
<style type="text/css">
.UsersBlog #blogerComments tr .blogCommentsText {
    border: 1px solid #CCC;
}
</style>

<div id='contentBody_tutorials'>
<table width="560" border="0">
  <tr>
    <td width="68"><img src="images/shareIcon.jpg" width="64" height="77" alt="share" /></td>
    <td width="482" class="TextShareYourTutorials">Share your knowledge <span class="whatIsAllAbout">what is this about?</span></td>
  </tr>
</table>
<p>&nbsp;</p>
<div id="contentOnContentBody_blog">
  <table id="blogerHeader" width="575" border="0" cellpadding="5">
    <tr>
      <td width="121" rowspan="4" align="center" valign="middle"><img src="images/userInvisible.jpg" width="80" height="80" /></td>
      <td colspan="2">Welcome</td>
    </tr>
    <tr>
      <td colspan="2">Your have 5   blogs</td>
    </tr>
    <tr>
      <td colspan="2">Last blog date</td>
    </tr>
    <tr>
      <td width="135"><a href="#">Add new blog</a></td>
      <td width="198"><a href="#">View my blogs</a></td>
    </tr>
  </table>
  <hr align="left" noshade="noshade" style="border:dotted 1px #b2b2b2;" />
<?php
    while ($blogsRow = $result -> fetch_object())
    {
?>
<div class="UsersBlog">
<img style="margin-right:5px;" src="images/userInvisible.jpg" width="49" height="49" align="left" /><span class="blogTitle"><?php echo $blogsRow->Btitle; ?></span><br /><span class="ByNameCommenter"><?php echo $blogsRow->ByName; ?><br /><?php echo $blogsRow->dateAdded ?></span>
   <br />
   <img style="margin:5px 0 5px 0;" src="images/roler_of_blogs.jpg" width="407" height="1" alt="ruler" />
   <br />
   <p><?php echo $blogsRow->Bdescription; ?></p>
   <br />
   <p><a href="includes/postComments.php?id=<?php $gotIT=$blogsRow->id; echo $gotIT; ?>"><span class="commentLink">Comment</span></a> - <span class="reportLink">Report</span></p>
   <div id="CollapsiblePanel" class="CollapsiblePanel">
     <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
     <div class="CollapsiblePanelContent">
   <table width="400" border="0" cellpadding="5" cellspacing="0" id="blogerComments">
   <?php
   $getComments="select * from blogscomments where blogestID=$gotIT";
   $getCommentsRuselts = $db -> query ($getComments) or die ($db->error);
   while($rows = $getCommentsRuselts ->fetch_object()) {
?>
<tr>
     <td align="left" class="grayBoldText">by: </td>
     <td align="left" class="normailDarkBlueText"><?php echo $rows->name; ?></td>
     <td align="left" width="38" class="grayBoldText">Date: </td>
     <td align="left" class="normailDarkBlueText"><?php echo $rows->dateCommented; ?></td>
   </tr>
   <tr>
   <td colspan="4" bgcolor="#F3F3F3" class="blogCommentsText"> <?php echo $rows->comments; }?></td>
   </tr>
   </table>
</div></div></div>
<?php
    }
?>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
</script>

如果我理解正确的话，PHP中的一个简单循环会是这样的：

<?php
$i = 1;
foreach( $dbRecords as $record ) {
    echo '<div id="CollapsiblePanel'.$i.'" class="CollapsiblePanel">';
?>
    <div class="CollapsiblePanelTab" tabindex="0">Comments</div>
       <div class="CollapsiblePanelContent">Content </div><div>
<?php
    $i++;
}
?>

但是，如果你的意思是用javascript更改ID而不重新加载页面

document.getElementById('oldId').id = 'anotherId';

问候

您需要维护一个索引，然后在进行更改时将其递增。

var index = 1;  
function update() {
    document.getElementById('CollapsiblePanel'+index).id = 'CollapsiblePanel'+(index+1);
    index++;
}