我正在使用qtip2 ajax-tooltips。这是脚本 (http://jsfiddle.net/craga89/L6yq3/):
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'http://qtip2.com/demos/data/owl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
要使用脚本,我需要 ajax 文件的链接:
<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a>
我想调用没有链接的 ajax 文件,但带有 data-id 属性,所以它看起来像:
<a href="#" data-id="1">Snowy Owl</a>
怎么做?
为了更清楚起见,类似于以下代码:
var urlFormat = "/content/web/tooltip/ajax/ajaxContent{0}.html";
$(document).ready(function() {
$("#products").qtip({
filter: "a",
content: {
url: "/content/web/tooltip/ajax/ajaxContent1.html"
},
width: 520,
position: "top",
requestStart: function(e) {
e.options.url = qtip.format(urlFormat, e.target.data("id"));
}
});
$("#products").find("a").click(false);
});
我认为你所追求的是:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).data('id'),
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
请注意,我将 url 参数从固定 url 更改为使用悬停链接中的 data-id 属性。 url: $(this).data('id'),
它甚至似乎有效:http://jsfiddle.net/L6yq3/492/
编辑
然后你可以自己构建 url,然后在某处添加 id。像这样:
url: 'http://path/to/ajax/script-' + $(this).data('id'),
或者,如果您在服务器上有一个 (php) 脚本,您可以将 id 添加为查询变量并在那里进行处理。像这样
的东西 url: 'http://path/to/ajax/script.php?id=' + $(this).data('id'),
请注意,您还可以使用实际的 id
属性,而不是 data-id
属性,方法是将 $(this).data('id')
替换为 $(this).attr('id')
你明白了吗?