Question

我正在使用Tooltipster库来生成工具提示，并使用简单的AJAX-custom-function示例作为基础。我需要修改它，但不是查询静态的“http://example.com/ajax.php”，如他们的示例所示，它将改为“http://example.com/ajax.php?id=contents_of_the_element_being_clicked”。例如，如果我的HTML中有<span>textbook</span>，则弹出窗口的内容链接将为“http://example.com/ajax.php?id=textbook”。

我已经成功地重新调整了示例，以便在每个<span>上激活，我不能做的是了解如何将<span>的innerHTML内容带入。

所以我正在寻找的是一行用元素的内容填充变量，我稍后可以附加到$ .get ... function（data）请求。

Answer 1

您可以使用html()中的jquery函数来提取内部html。此外，您可以使用param()对提取的html进行编码。

var param = "?" + $.param({ id: origin.html() });

完整示例（使用Tooltipster 3.3.0和jQuery 1.10）：

$('.tooltip').tooltipster({    
    functionBefore: function(origin, continueTooltip) {
        var param = "?" + $.param({ id: origin.html() });       
        if (origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                origin.data('loaded', true);
                origin.tooltipster('content', data.id);
                continueTooltip();
            });            
        }
        else {
            continueTooltip();        
        }
    }
});

Tooltipster Version 4：

$('.tooltip').tooltipster({    
    content: 'Loading...',
    functionBefore: function(instance, helper) {
        var $origin = $(helper.origin);
        var param = "?" + $.param({ id: $origin.html() });       
        if ($origin.data('loaded') !== true) {
            $.get('example.com/ajax.php' + param, function(data) {
                instance.content(data.id);
                $origin.data('loaded', true);
            });            
        }
    }
});

HTML：

<span class="tooltip" title="This is my span's tooltip message!">Some text test</span>

根据元素的内容在Tooltipster中生成工具提示

1 个答案: