Tooltipster无法正常工作

Question

我正在编写一个Chrome扩展程序，可以突出显示特定的名称，并在工具提示中提供有关该名称的其他信息。基本上，我有一个像这样的包含名称和ID的对象：

var list = {
    'Name1' : 'ID0001',
    'Name2' : 'ID0002',
}

然后我使用了一个jQuery高亮插件来突出显示文档中关键字的每个出现，并为对应于关键字值（例如ID0001）的类分配了一个span元素，这很好用...

$.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() {  });

现在，如果我首次将鼠标悬停在一个具有名称的span上，tooltipster不会执行任何操作，Chrome控制台会显示以下内容：

Uncaught ReferenceError: content is not defined 

但是，如果我第二次悬停在上面，它会显示正确的内容。此外，如果我第一次悬停在一个名称上，第二次悬停在另一个名称上，提示框将显示第一个名称的内容。

我对JS和jQuery相当新，我就是找不出我在这里做错了什么。

我找到了几个关于类似问题的其他线程，但是没有任何提出的解决方案适用于我。

以下是“完整”的更新代码：

$(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;
}

});

- user3777005

---

从我所看到的代码中，似乎有几个左右大括号没写，请你解决一下吧？需要记住的一件事是 $.getJSON 不是异步的，这将是导致内容直到请求 JSON 内容完成前不会显示的原因 :) - zesda

我该如何在继续之前等待$.getJSON完成？ - user3777005

我通常不使用$.getJSON，但您是否尝试过将示例改为遵循网站http://iamceege.github.io/tooltipster/#functionBeforeExample上的`functionBefore`示例？它需要修改为使用`GET`，数据类型应为`JSON` :) - zesda

Answer 1

由于 $.getJSON 调用是异步的，因此您应该在 $.getJSON 的 done 回调中更新 tooltipster 的内容。您可以使用以下代码：

$('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);

    });
}

})

- Shino Kurian