使用jQuery在PHP中显示动态工具提示 - Using jQuery to display dynamic tooltips with PHP

我使用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动态生成一个不同的工具提示为每个"consulta"根据这个id，有一种方法来迭代我的表和选择与选择器"$"的元素?

为所有新元素添加公共类，并使用$(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,
     });
   }); 
});

如果您使用不同的方法(用类代替id)，您的工作可能会轻松一些。下面的例子来自jQuery UI工具提示使用类，你可以添加工具提示到无限数量的元素。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tooltip - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( document ).tooltip();
  });
  </script>
  <style>
  label {
    display: inline-block;
    width: 5em;
  }
  </style>
</head>
<body>
 
<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
 
</body>
</html>

这是一个工作的jsfiddle演示。

<?php

for($i = 1;美元我& lt;sizeof ($ consulta_id);$我+ +){$ data = str_replace ('-', '/', $ consulta_data[我]美元);$data = date('d/m/Y'， strtotime($data));回声";$consulta_id[$i].";回显".$data.";$consulta_hora[$i].";$consulta_desc[$i].";回声"。美元consulta_inst [$ i]。";$consulta_prof[$i].";回声";}?>

$(document).ready(function () {
    $('table tr').each(function () {
        $(this).hover(function () {
           var id = $(this).attr('id');
           alert(id);
       });
    });
});

http://jsfiddle.net/mdamia/3q0hj5ya/6/

在表的子表<tr>上使用.each()
查找您行第一个<td>列的文本中的id
使用已有的功能

    $('#table').children('tr').each(function(){
        var tr = $(this);
        var id = tr.find('td').first().text();
        tr.balloon({
            url: '../functions/retorna-dados-instituicao.php?idInstituicao=' + id,
            position: "bottom",
            offsetX: -30,
        });
    });