0 
    <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がポップアップウィンドウに渡されませんでした。誰かが私を提案できますか？

4

1 に答える 1

0

ID異なる要素に同じものを使用しないでください。

同じ をロードおよびアンロードしているだけpopupBoxです。すべての popupboxes は同じIDですが、それは間違っています。また、HTMLにはnoがありません。 #popupboxスクリプトで、次のように変更します。

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

and に変更して、すべての#wingsand#popupboxをクラスに変更し.wingsます.popupbox。class="wings"およびを使用するように HTML も更新しますclass="popupbox"。

説明

は、クリックされているリンクの隣を$(this).next('.popupbox')選択します。.popupboxしたがって、リンクをクリックすると、リンクの.popupbox隣に表示されます。これが明確であることを願っています。

于 2013-03-03T14:34:06.567 に答える