php - 可折叠面板在我的循环中每次都会增加它的 id

Question

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

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

现在我从数据库中获取内容，每次获取更多内容时，我都会进入新的 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>

Answer 1

如果我理解正确的话，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';

问候