从mysql数据中弹出jQuery

Question

    <script type="text/javascript" src="jquerynew.js"></script>
    <script>

        $(document).ready(function() 
        {       
             $('.wings').click(function(event) 
   {
       $(this).next('.popupbox').fadeIn();
       $('body').css('background','#333');        
   });

       $('.popupclose').click(function(event) 
       {            
           unloadPopupBox();
           $('body').css('background','white');
       });

       function loadPopupBox() 
       {  
          $('.popupbox').fadeIn("slow");
       }        

       function unloadPopupBox() 
       {
          $('.popupbox').fadeOut("normal");       
       }  
       $(".popupbox").hide();
    });

</script>

<style>
 table { border-collapse:collapse; margin-left:370px; margin-top:20px; padding:10px; font-family:Trebuchet MS; min-width:530px; }
 table th,td { border:1px solid #8AC007; }

 .popupbox {  position:fixed; _position:absolute; /* hack for internet explorer 6 */ background:#FFFFFF; left:0px; top:150px; 
           border:2px solid lightgray; padding:15px;  z-index:100px; font-size:15px;  -moz-box-shadow: 0 0 5px lightgray; 
           -webkit-box-shadow: 0 0 5px lightgray; box-shadow: 0 0 5px lightgray; display:none; }

 .popupclose { border:0px solid lightgray; color:#6FA5E2; font-family:verdana; font-weight:bold; line-height:15px; float:right;
               cursor:pointer;  text-decoration:none; }
</style>

<?php

  $con = mysql_connect("localhost","root","");  
  mysql_select_db("popupsql",$con);

  $users = mysql_query("SELECT u.id, u.username, u.firstname, u.lastname FROM lms_user u");  
  $rows = array();
  while($row = mysql_fetch_assoc($users))
  $rows[] = $row;

  echo '<table>
             <tr style="background:#8AC007;color:#8A4C25;font-size:15px;">
                <th style="padding:10px;">Firstname</th>
                <th style="padding:10px;">Lastname</th>
                <th style="padding:10px;">Status</th>
             </tr>';
  foreach($rows as $row)
  { 
     $userid = $row['id'];
     echo '<tr>
               <td style="padding:5px;">'.$row['firstname'].'</td>
               <td style="padding:5px;">'.$row['lastname'].'</td>
               <td style="padding:5px;text-align:center;">
                 <a class="wings">view status&nbsp;'.$userid.'</a>
                 <div class="popupbox">
                     <div style="height:30px;"><img class="popupclose" src="close.png" style="float:right;"></img></div>';
                     $grades = mysql_query('SELECT u.firstname, u.lastname, u.email, ggh.finalgrade, gi.itemname FROM lms_grade_grades_history ggh, 
                                           lms_grade_items gi, lms_user u WHERE ggh.itemid = gi.id AND gi.itemtype = "course" AND u.id = ggh.userid 
                                           AND u.id = '.$userid.'');                     
                     $rows = array();
                     while($row = mysql_fetch_assoc($grades));
                     $rows[] = $row;
                     foreach($rows as $row)
                     {
                       echo 'SELECT u.firstname, u.lastname, u.email, ggh.finalgrade, gi.itemname FROM lms_grade_grades_history ggh, 
                                           lms_grade_items gi, lms_user u WHERE ggh.itemid = gi.id AND gi.itemtype = "course" AND u.id = ggh.userid 
                                           AND u.id = '.$userid.'';
                     }
                 echo '</div>
               </td>
           </tr>';
  }
  echo '</table>';


?>

这是我从mysql数据库动态显示jQuery弹出窗口的代码。弹出窗口显示所有行但不显示相同的id，即正确的id没有传递给弹出窗口。任何人都可以建议我。

Answer 1

永远不要对不同的元素使用相同的ID！

您只是加载和卸载相同的popupBox。所有弹出框都有相同的ID，这是错误的。此外，HTML中还有否 #popupbox。在您的脚本中，更改为：

   $('.wings').click(function(event) 
   {
       $(this).next('.popupbox').fadeIn();
       $('body').css('background','#333');        
   });

通过更改为#wings和#popupbox，将所有.wings和.popupbox更改为班级。同时更新HTML以使用class="wings"和class="popupbox"。

<强>解释

$(this).next('.popupbox')将选择点击链接旁边的.popupbox。因此，您将点击链接，系统会显示该链接旁边的.popupbox。希望这很清楚。