通过ajax切换php循环中的div

Question

Hello all, I want a div which is in a while loop of php to be toggled when clicked on a button. Particular div should be toggled when particular button is clicked. So far I have tried and it works, but only for the first div of the loop. Only the first div gets toggled , please help.

Show comments is the button to be clicked on:

<td colspan=2 style="background-color:#FFFBE6;opacity:.89;height:25px;max-height:27px;">
                    <div style="float:left;margin-left:80px;" id="ratinginadiv">
                    <b class="ratings" id="showcomm" onclick="showcomments(this);"><?=$no_ofcomments?> comments |</b>   <b class="ratings"><?=$no_offollowers?> Following </b> | 
                    <b onclick="displaystars();" class="ratings">Star</b>|</div></td>


div id="commentdiv">
            <table style="background-color:#DDFFFF; border:1px solid #C9D291;width:100%;margin-bottom:0px;border-top:0px;margin-top:0px;" align="center" cellspacing=0>
                    <?php
                    $onid=$postainarray['id'];
                    $selectcomments=mysql_query("select comments,time,onemail,emailid ,hidden from waf where onid_comment='$onid' and comments!='' ");
                    while($commentsinaray=mysql_fetch_array($selectcomments)){
                    $commemail=$commentsinaray['emailid'];
                    $dataofcommenter=mysql_query("select name,pic,email,dob,gender from fk_mem where email='$commemail'");
                    $datainarray=mysql_fetch_array($dataofcommenter);
                    if($commentsinaray['hidden'] == 'hide'){
                    $nameintitle='hidden';
                    $emailintitle='hidden';
                    $picofcomm="blur.jpg";
                    }

                    else{
                    $nameintitle=$datainarray['name'];
                    $emailintitle=$datainarray['email'];
                    $picofcomm=$datainarray['pic'];
                    }
                    ?>
            <tr>
                <td align="center" style="width:55px;background-color:white;opacity:1;border-bottom:2px solid white;">
                    <a title="<?=$nameintitle?>,<?=$datainarray['gender']?>,[<?=$datainarray['dob']?>],<?=$emailintitle?>" href="profile_page_name.php?friendemail=<?=$emailintitle?>"><img src="uploads/<?=$picofcomm?>" style="width:40px;max-height:55px; border:1px solid green;padding:1px;" /></a>
                </td>
                <td align="left" style="background-color:#F3FCFF;opacity:1;border-bottom:2px solid white;">
                    <a href="profile_page_name.php?friendemail=<?=$emailintitle?>" title="Go to <?=$nameintitle?>'s Profile.." style="text-decoration:none;color:#718E99;font-weight:normal;margin-left:5px;margin-bottom:0px;">
                    <?=$nameintitle?></a><br>
                    <p style="margin-left:5px;margin-top:0px;"><?=$commentsinaray['comments']?></p>
                </td>
                <td align="left" style="width:65px;vertical-align:top;border-left:2px solid white;border-bottom:2px solid white;">
                    <small style="color:red;font-size:14px;"><?=$commentsinaray['time']?></small>
                </td>
            </tr>
            <?php } ?>
            <tr>
            </table>
            </div>


function showcomments(obj){
    var currentdiv = $("#commentdiv");
        currentdiv.slideToggle();
    }

Answer 1

Man oh man...divs within malformed tables which hold malform tables...

The code to toogle is everywhere, I assume the only problem your having is cause you aren't assigning unique ids to each div. Add a counter to your loop and then add it to the div id "commentDiv"

Work on getting the structure of your page proper before adding features.