单击事件同时适用于所有视图按钮

Question

我正在屏幕上显示带有按钮的记录列表，如下图所示。

现在我在弹出窗口中显示employee_id，因此管理员将单击查看按钮，弹出窗口将显示员工ID。

但我的问题是，我在点击查看按钮的弹出窗口中获得了所有员工列表。为什么会出现这个问题，因为我在循环中查看按钮。

      <td><a href="javascript:void(0);" id="open_popup">View</a>

我的脚本在这里

$(document).ready(function(){
              $("a#open_popup").click(function(){
                    $(".popup").show();  
               });  
 }); 

因此，当我单击任何视图按钮时，它会在弹出窗口中显示所有员工详细信息，我必须显示单个用户 ID。

<?php if (!empty($get_emp_records)) {?>
<table class="table " >  
        <thead>
         <tr>  
          <th>Employee Name</th> 
           <th>Designation</th>  
           <th>Role</th>  
           <th>Status</th>  
           <th>Action</th>               
         </tr> 
          </thead>
         <?php  
         foreach ($get_emp_records as $row)  
         { $encryption_id=$this->encryption->encrypt($row->id);//encrpt the id ?>
            <tbody>
            <tr>   
            <td><?php echo $row->firstname;  echo $row->lastname;?></td>
            <td><?php echo $row->designation;?></td>  
            <td><?php echo $row->access_role;?></td>
            <?php if ($row->is_approved == 1): ?>
            <td><a href="javascript:void(0)">Approved</a></td>
            <?php else: ?>
            <td><a  href="#">Pending</a></td>
          <?php endif; ?>
          <td><a href="javascript:void(0);" id="open_popup">View</a> 
            <a href="<?php echo site_url('Employee_control/employee_archive?key='.$encryption_id)?>">Archive</a>
          </td>  

          <div class="popup"  style="display: none;">
            <p><?php echo $row->employee_id;?></p>
          </div>
            </tr>   
          </tbody> 
         <?php }       
         ?>              
   </table>  
<?php }else{echo "No record found";}?>

Answer 1

希望对您有所帮助：

像这样在视图锚点处的 onclick 事件上添加函数 openPopup

<td>
   <a onclick="openPopup(this)" data-id="<?=$row->id;?>">View</a>
   ........ 
</td> 

像这样向您的弹出 div 提供 id：

<div id="popup-<?=$row->id;?>"  style="display: none;">
   <p><?php echo $row->employee_id;?></p>
</div>

你的js函数openPopup应该是这样的：

<script type="text/javascript">

function openPopup(obj) 
{
    var id = $(obj).data('id');
    $("#popup-"+id).show();  
}

function closePopup(obj) 
{ 
   var id = $(obj).data('id'); 
   $("#popup-"+id).hide(); 
}; 
</script>