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

标签 javascript php jquery html

我正在使用 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”生成不同的工具提示,有一种方法可以迭代我的表并使用选择器“$”选择元素?

最佳答案

为所有新元素添加公共(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,
     });
   }); 
});

关于javascript - 使用 jQuery 通过 PHP 显示动态工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32214780/

相关文章:

javascript - system.js 是否向我的 javascript 添加了内容?

php - Magento 隐藏/删除交易电子邮件中的价格

jQuery - 如果水平滚动的 div 位于滚动的最左边和最右边,则触发事件

javascript - 当任何查看 js 代码的人都可以看到 javascript API key 时,它有什么意义

javascript - 在 Excel 电子表格中运行 JQuery 地理定位脚本

javascript - 使用 typescript react redux 设置 reducer

javascript - Nodejs for 循环更改为同步

javascript - .toFixed() 如果数字对于元素来说太大

php - 按顺序选择事件数据

php - WordPress paginate_links - 如何使用它?