javascript - 使用 jQuery 通过 PHP 显示动态工具提示

Question

我正在使用 jQuery 插件将气球显示为工具提示。

我用 PHP 生成了下表:

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

下面的脚本生成工具提示:

<script>
$(function() {
      //var id;
      $('#id').balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
        position: "bottom",
        offsetX: -30,
     });
  }
});
</script>

我需要动态地将每个“$consulta_inst”id传递给这个脚本，以便根据这个id为每个“consulta”生成不同的工具提示，有一种方法可以迭代我的表并使用选择器“$”选择元素？

Answer 1

为所有新元素添加公共(public)类，并使用 $(this).attr("id") 获取每个元素的“id”，因为您在 php 请求中使用它。

所以你的 PHP 代码将是:

<?php
for($i = 1; $i < sizeof($consulta_id); $i++){
    $data = str_replace('-', '/', $consulta_data[$i]);
    $data =  date('d/m/Y', strtotime($data)); 
    echo "<tr>";
    echo "<td>" .$consulta_id[$i]."</td>";
    echo "<td>" .$data."</td>";
    echo "<td>" .$consulta_hora[$i]."</td>";
    echo "<td>" .$consulta_desc[$i]."</td>";
    echo "<td class=\"balloon\" id=\"".$i."\">".$consulta_inst[$i]."</td>";
    echo "<td>" .$consulta_prof[$i]."</td>";
    echo "</tr>";
}
?>

jQuery 代码:

$(function() {
  $('.balloon').each(function(){
      $(this).balloon({
        url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + $(this).attr('id'),
        position: "bottom",
        offsetX: -30,
     });
   }); 
});