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

    $(document).ready(function() 
    {       
       $('#wings').click(function(event) 
       {
           loadPopupBox();
           $('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:472px; 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 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)
  { 
     echo '<tr>
               <td style="padding:5px;">'.$row['firstname'].'</td>
               <td style="padding:5px;">'.$row['lastname'].'</td>
               <td style="padding:5px;text-align:center;">
                 <a id="wings">view status</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 FROM grade_grades_history ggh, user u WHERE 
                                        u.id = ggh.userid AND u.id = '.$userid.'');   

                 $rows = array();
                 while($row = mysql_fetch_array($grades));
                 $rows[] = $row;
                 foreach($rows as $row)
                 {
                   echo $row['email'];
                 }
             echo '</div>
               </td>
           </tr>';
  }
  echo '</table>';     
?>

jQueryポップアップを動的に表示するためのコードは次のとおりです。ポップアップは最初の行でのみ開きますが、すべてのユーザーにポップアップが必要です。つまり、最初のユーザービューのステータスをクリックすると、ポップアップに適切なステータスが表示されます。 。誰かが私を提案できますか？

4

1 に答える 1

2

行にIDを使用する代わりに、それをクラスにします。idをセレクターとして使用して、最初に一致した要素にのみ適用されるクリックハンドラーを割り当てていますが、それらをクラスに変更してクラスを選択すると、すべての要素に適用されます。

于 2013-03-03T09:29:30.720 に答える