使用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动态传递给此脚本，以便根据此id为每个“ consulta”生成不同的toolltip，有一种方法可以迭代我的表并使用选择器“ $”选择元素？
4 个解决方案
解决方案1
1 已采纳 2015-08-25 22:11:53
将通用类添加到所有新元素中，并使用$（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,
});
});
});
解决方案2
0 2015-08-25 22:12:38
如果要使用其他方法（使用类而不是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'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'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>
解决方案3
0 2015-08-25 22:14:01
这是一个有效的jsfiddle演示。
<?php
for（$ i = 1; $ i <sizeof（$ consulta_id）; $ i ++）{$ data = str_replace（'-'，'/'，$ consulta_data [$ i]）; $ data = date（'d / m / Y'，strtotime（$ data））; 回显“”； 回声“”。$ consulta_id [$ i]。“”; 回声“”。$ data。“”; echo“”。$ 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);
});
});
});
解决方案4
0 2015-08-25 22:15:01
- 在表的子级
<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,
});
});
使用带引导工具提示的jQuery hoverIntent插件的问题
[英]Issue on Using jQuery hoverIntent Plugin With Bootstrap Tooltips
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.