javascript – 如何获取工具提示器在mouseup上触发并在ajax函数中使用所选文本？

我正在使用此代码显示跨度中文本的翻译作为点击工具提示：

$(document).ready(function () {
    $('.word').tooltipster({
        trigger: 'click',
        touchDevices: true,
        content: 'Loading...',
        functionBefore: function (origin, continuetooltip) {

        continuetooltip();

        if (origin.data('ajax') !== 'cached') {
            $.ajax({
            type: 'GET',
            url: 'translate.PHP?word=' + $(this).text(),
            success: function (data) {
                origin.tooltipster('content', data).data('ajax', 'cached');
            }
            });
        }
        }
    });
    });

我还希望在选择文本时显示(触发)工具提示,并将所选文本作为url参数发送,如：translate.PHP？word = {selected text}.这需要工作,即使文本是单独的跨度,跨度的部分文本,而不是跨度等;基本上是页面上选择的任何文字.

我找到了下面的代码(jsfiddle),但我无法弄清楚如何将它集成到我已有的代码中：

$('div').mouseup(function() {
    alert(getSelectedText());
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createrange().text;
    }
    return '';
}

这是我的html的样子：

    <div class="container">
15, 16. (<span class="word">a</span>) 
<span class="word">Paano</span> 
<span class="word">napaibig</span> 
<span class="word">ni</span> 
<span class="word">Esther</span> 
<span class="word">ang</span> 
<span class="word">hari</span>? (
<span class="word">b</span>) 
<span class="word">Bakit</span> 
<span class="word">maaaring</span> 
<span class="word">naging</span> 
<span class="word">hamon</span> 
<span class="word">kay</span> 
<span class="word">Esther</span> 
<span class="word">ang</span> 
<span class="word">mga</span> 
<span class="word">pagbabago</span> 
<span class="word">sa</span> 
<span class="word">buhay</span> 
<span class="word">niya</span>?<br>
15 
<span class="word">Nang</span> 
<span class="word">panahon</span> 
<span class="word">na</span> 
<span class="word">para</span> 
<span class="word">iharap</span> 
<span class="word">si</span> 
<span class="word">Esther</span> 
<span class="word">sa</span> 
<span class="word">hari</span>
...

解决方法:

尝试从ajax调用中调用getSelectedText().但是在mouseup上做.这将检查是否从您的函数返回任何选定的文本,然后进行ajax调用(如果有).

$('div').mouseup(function() {
    var selectedText = getSelectedText();
    if(selectedText) {
        $.ajax({
            type: 'GET',
            url: 'translate.PHP?word=' + encodeURI(selectedText),
            success: function (data) {
                origin.tooltipster('content', data).data('ajax', 'cached');
            }
        });
    }
});

function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createrange().text;
    }
    return '';
}