我正在尝试编写一个Chrome扩展程序,它会突出显示某些名称,并在工具提示中提供有关该名称的其他信息。基本上,我有一个名称和ID的对象,如下所示:
var list = {
'Name1' : 'ID0001',
'Name2' : 'ID0002',
}
然后我使用jQuery高亮插件突出显示文档中每个键的出现,并为span元素分配一个对应于键值的类(例如ID0001),这样可以正常工作。
$.each(list, function(key, value) {
$("p").highlight(key, {caseSensitive: false, className: value });
});
结果如下:
<span class="ID0001">Name_1</span>
接下来,我尝试选择具有包含ID的第一部分的类名的每个元素并激活Tooltipster:
$('span[class*=ID]').tooltipster({
interactive: true,
content: $(<p>Loading...</p>),
contentAsHTML: true,
functionBefore: function(origin, continueTooltip) {
continueTooltip();
// Below, I'm trying to get whole ID, without the
// 'tooltipstered' class, that Tooltipster assigned.
var id = $(this).attr('class').replace(' tooltipstered','');
$.getJSON(chrome.extension.getURL('db.json'), function(db) {
// Inside here, I'm using the ID to get information from a json
// file and store it in a variable called 'content', e.g.
var content = '<p>db[id].link</p>';
// Then I'm trying to update the content of the tooltip:
origin.tooltipster({
content: content,
contentAsHTML: true
});
}
});
所有这些代码都在这里:
$(document).ready(function() { });
现在,如果我第一次将鼠标悬停在内部名称的范围内,则工具提示者不会做任何事情,Chrome控制台会说:
Uncaught ReferenceError: content is not defined
但我第二次将鼠标悬停在它上面会向我显示正确的内容。此外,如果我第一次将鼠标悬停在名称上,而第二次悬停在另一个名称上,则工具提示将显示名字的内容。
我对JS和jQuery相当陌生,我无法在这里找出我做错的事。
我已经找到了一些关于类似问题的其他主题,但没有一个提议的解决方案适用于我。
这是&#34;完成&#34;更新的代码:
$(document).ready(function() {
$.each(list, function(key, value) {
$("p").highlight(key, {caseSensitive: false, className: value });
});
$('span[class*=ID]').tooltipster({
interactive: true,
contentAsHTML: true,
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
var id = $(this).attr('class').replace(' tooltipstered','');
var content = generate_content(id);
origin.tooltipster('content', content);
}
});
function generate_content(id) {
$.getJSON(chrome.extension.getURL('db.json'), function(db) {
// Getting information from the .sjon and storing it in "content"
});
return content;
}
});
答案 0 :(得分:0)
由于对$ .getJSON的调用是异步的,因此您应该在$ .getJSON的完成回调中更新工具提示器的内容。您可以使用类似下面的代码 -
$('span[class*=ID]').tooltipster({
interactive: true,
contentAsHTML: true,
content: 'Loading...',
functionBefore: function(origin, continueTooltip) {
continueTooltip();
var id = $(this).attr('class').replace(' tooltipstered','');
generate_content(id, origin);
}
});
function generate_content(id, origin) {
$.getJSON(chrome.extension.getURL('db.json'), function(db) {
// Getting information from the .sjon and storing it in "content"
var content - set the content here.
origin.tooltipster('content', content);
});
}
})