php - AJAX 悬停工具提示仅显示表中第一行的返回数据

Question

我正在使用 AJAX 将数据发送到 PHP 页面，其中数据是从 MySQL 获取的。将鼠标悬停在 .payoudata 上类(class)发送其data-id值传递给 PHP，并得到结果。使用 <div id="PayoutData"> 显示但它只显示与第一条记录相关的结果。

这是我生成表格的 PHP 代码:

<? while($srow = $stm->fetch(PDO::FETCH_ASSOC)) { ?>
  <tr>
    <td id="tooltip1">
      <a href="#" class="payoudata" data-id="<?php echo $srow['application_no']?>"><?php echo $srow['application_no']?>
       <span><div id="PayoutData"></div></span>
      </a>
    </td>
  </tr>  
<? } ?>

这是我用于获取和显示工具提示的 jQuery 代码:

$('.payoudata').hover(function(){

    var paydata =  $(this).attr("data-id");

    $.ajax({
        type:'post',
        url:'payout-emp-data.php',
        data:{paydata : paydata},
        success: function(paydataresult){
            $('#PayoutData').html(paydataresult);
            }
        });
    });

我在这个 <div id="PayoutData"> 中获得第一条记录

当我尝试查看第二条记录时，它正在发送数据并获取结果但无法显示，如下面的屏幕截图所示。显示返回数据的可能方式是什么？

第一条记录截图:

第二条记录截图:

Answer 1

您为每行生成一个具有相同 ID (PayoutData) 的 div，因为 id 属性应该是唯一的。 $('#PayoutData').html(paydataresult) 总是第一个。

为 PHP 尝试这个:

<?php while($srow = $stm->fetch(PDO::FETCH_ASSOC)){ 
         $rowId = $srow['application_no'];
?>                
   <tr>
      <td id="tooltip1">
         <a href="#" class="payoudata" data-id="<?= $rowId ?>"><?= $rowId ?>
           <span>
             <div id="PayoutData<?= $rowId ?>"></div>
           </span>
         </a>
      </td>
    </tr>  
<? } ?>

和 Javascript:

$('.payoudata').hover(function(){

  var paydata =  $(this).attr("data-id");

  $.ajax({
    type:'post',
    url:'payout-emp-data.php',
    data:{paydata : paydata},
    success: function(paydataresult){
        $('#PayoutData' + paydata).html(paydataresult);
    }
  });
});