javascript - 如何让 tooltipster 在 mouseup 上触发并在 ajax 函数中使用选定的文本？

Question

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

$(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>
...

Answer 1

在我看来，使用如此庞大的库来获得你想要做的事情并不是一个好主意，虽然你可以在没有插件的情况下轻松地做到这一点，而且你想要做的事情似乎无法通过插件实现因为您的操作既不是插件支持的 click 也不是 hover。

这是一个没有插件的演示 DEMO

var cache = []; //defining the cache

$('.word').mouseup(function(e) {
    var selectedText = getSelectedText();
    if (selectedText.length > 0) { //if any text was selected

        //position and show the tooltip
        $('.tooltip').css({
            left: e.pageX,
            top: e.pageY
        }).addClass('show').text('loading...');

        if (checkCache(cache, selectedText) === '') { //check the cache for the translation

            //for the sake of the demo we'll simulate the ajax call, remove this part in your actual code
            setTimeout(function() {
                cache.push({
                    value: selectedText,
                    translation: 'translation of ' + selectedText
                });
                $('.tooltip').text('translation of ' + selectedText);
            }, Math.floor(Math.random() * (2000 - 300 + 1) + 300));
            return;
            //end of the simulation

            //if didn't find the translation call the ajax
            $.ajax({
                type: 'GET',
                url: 'translate.php?word=' + selectedText,
                success: function(data) {

                    //cache the translated text
                    cache.push({
                        value: selectedText,
                        translation: data
                    });

                    $('.tooltip').text(data); //show the translation
                }
            });
        } else {

            //if it was cached, load from the cache
            $('.tooltip').text(checkCache(cache, selectedText));
        }
    }
});

//close the tooltip if clicked somewhere on the page other than the text or the tooltip
$(document).on('click', function(e) {
    if ($('.word,.tooltip').is(e.target) || $('.word,.tooltip').has(e.target).length > 0) return false;
    $('.tooltip').removeClass('show');
});

//get the selected text
function getSelectedText() {
    if (window.getSelection) {
        return window.getSelection().toString();
    } else if (document.selection) {
        return document.selection.createRange().text;
    }
    return '';
}

//check the cache for translation
function checkCache(cache, value) {
    var translation = '';
    $.each(cache, function(i, obj) {
        if (obj.value == value) {
            translation = obj.translation;
            return false;
        }
    });
    return translation;
}