Question

您是否知道突出显示单词并添加onmouseover事件的最有效方法？

我有文字，我想制作一些单词解释字段，所以当用户将光标放在单词上时，我将AJAX调用到字典并显示其含义。

我有两个想法： 1）在显示文本之前，将每个单词放到包装器中。例如：

Hello
world

但我认为这会严重超载页面。

2）当用户在一个区域内按住光标超过0.5秒时，我得到指针坐标，计算显示的单词（我不知道是否可行）并进行AJAX调用。

您认为更好，更容易编码？

Answer 1

首先突出显示光标下的单词然后显示它的含义，检查我的小提琴：http://jsfiddle.net/shahe_masoyan/z7nkU/1/

<强> HTML

    <div>
        <span>This text is a test text</span>
    </div>

<强>的JavaScript

$('div').each(function() {
    var $this = $(this);
    $this.html($this.text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

$('div span').hover(
    function() { 
        $(this).css('background-color','#ffff66'); 
        alert(getTheMeaningOfTheWord($(this).html()));
    },
    function() { 
        $(this).css('background-color',''); 
    }
);

function getTheMeaningOfTheWord(word){

    return word+' = theMeaning';
}

Answer 2

我认为1很简单，可以这样做：

小提琴：http://jsfiddle.net/9d227/

<强> HTML

<div id="yourDiv" style="Display: none;">your Text Here</div>
<div id="yourActualDiv"></div>

<强> JQuery的

var wordArray = $('#yourDiv').html().split(' ');
var totalString = "";
for(var i=0;i<wordArray.length;i++)
    totalString += "<span>" + wordArray[i] + " </span>";
$('#yourActualDiv').html(totalString);
var ConcurrenyFlag = 0;
$('#yourActualDiv span').mouseover(
    function()
    {
       if(ConcurrenyFlag == 0)
       {
           ConcurrenyFlag = 1;
           // Your code here.
           ConcurrenyFlag = 0;
       }
    }
)

这样，您只需将文字放在yourDiv中即可。 javascript代码将为您处理其余部分希望这会对你有所帮助。

ConcurrenyFlag将有助于减少客户端的负担，因为一次只能运行一个代码部分。

Answer 3

像这样的东西应该做一些接近你正在寻找的东西。

$('.addWordDictionary').html('<span>'+$('.addWordDictionary').html().replace(/ {1,}/g, '</span> <span>')+'</span>');

但是，正如你所说，它可能是客户密集型的，特别是如果有很多文本的话。

Answer 4

我做了这些东西：http://jsfiddle.net/wared/eAq9k/。需要textarea并通过点击而不是悬停来工作。有关getCaret()的详细信息，请访问https://stackoverflow.com/a/263796/1636522。

<textarea readonly>Lorem ipsum</textarea>

textarea {
    display: block;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    margin: .5em 0;
}

$(function () {
    var el = $('textarea'),
        text = el.text();
    el.click(function () {
        var i = getCaret(this),
            w = getWord(text, i);
        $('p').text(i + ' : "' + w + '"');
    });

    // https://stackoverflow.com/a/995374/1636522

    el[0].style.height = '1px';
    el[0].style.height = 25 + el[0].scrollHeight + 'px';
});

function getWord(s, i) {
    var r = /\s/g;
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}

Answer 5

您可以使用Lettering.js来解决此问题

http://letteringjs.com/

简化示例：

http://jsfiddle.net/Zzxpx/

HTML：

<div class="w">"You will die of suffocation, in the icy cold of space"<div>

JS：

$(".w").lettering('words');

鼠标突出显示单词

5 个答案: