AJAX懸停工具提示僅針對表中的第一行顯示返回的數據

Question

我正在使用AJAX將數據發送到PHP頁面，其中的數據是從MySQL獲取的。 將鼠標懸停在.payoudata類上，會將其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);
    }
  });
});

Answer 2

HTML4規范說該ID必須是唯一的。

id屬性為元素分配唯一標識符（可以由SGML解析器驗證）。

要解決此問題，您將需要使用類而不是id

替換為：

$('#PayoutData').html(paydataresult);

通過：

$('.PayoutData', $(this)).html(paydataresult);

這行：

<div id="PayoutData">

通過：

<div class="PayoutData">