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 Specification says the ID必须是唯一的。

id属性为元素分配唯一标识符（可由SGML解析器验证）。

要解决此问题，您需要使用类而不是ID

替换这个：

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

由：

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

和这一行：

<div id="PayoutData">

由：

<div class="PayoutData">

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

2 个答案: