Блог

Я пытаюсь закодировать расширение Chrome, которое выделяет определенные имена и предоставляет дополнительную информацию об имени во всплывающей подсказке. В принципе, у меня есть объект с именами и идентификаторами, подобными этому:

 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>
 

Затем я пытаюсь выбрать каждый элемент с именем класса, содержащим первую часть идентификатора, и активировать 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() {  });
 

Теперь, если я впервые наведу курсор на область с именем внутри, 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;
}

});
 

Поскольку вызов $.getJSON является асинхронным, вы должны обновить содержимое tooltipster в выполненном обратном вызове $.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);

    });
}
 

})