如何让 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

尝试从 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 '';
}

Answer 2

在我看来，使用如此庞大的库来获得你想要做的事情并不是一个好主意，虽然你可以在没有插件的情况下轻松地做到这一点，而且你想要做的事情似乎是不可能的插件 '因为你的操作既不是插件支持的 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;
}

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

How can I get tooltipster to trigger on mouseup and use selected text in ajax function?

javascript

php

ajax

jquery

tooltipster