javascript - 在某个词上激活悬停 Action

Question

好的，这是已经完成的事情，所以我知道这是可能的。我想要的是，当用户将鼠标悬停在由 wordHoverAssign() 函数定义的某个词上时，某些东西会被激活。

因此，以更简洁的方式:加载页面时，文本我喜欢土 bean ! 显示在屏幕上，是用 HTML 创建的。然后函数 wordHoverAssign("potatoes") 被执行。然后，当我将鼠标悬停在 potatoes 这个词上时，会弹出一条警告消息，例如，这条消息 You hovered the word!。

这可能吗？我会怎么做呢？如果我不必再使用任何框架/插件，我真的很喜欢它。顺便说一句，我正在使用 jQuery。

谢谢。

到目前为止我的代码(如果你不想设置它):

wordHoverAssign("potatoes");

function wordHoverAssign(theWord) {
  //code here
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I love potatoes!</p>

Answer 1

以下内容允许您为#content div 中的任何单词分配不同的功能。仅当悬停特定单词时才会调用相关函数。

<div id="content">
    I love potatoes!<br/>
    She loves something else<br/>
    The potatoes coming again.
</div>

<script>
    window.wordsAssigned = {};
    function wordHoverAssign(word,func){
        wordsAssigned[word] = func;
    }

    wordHoverAssign('potatoes',function(){
        alert('Patatoes hovered!');
    });
    wordHoverAssign('something else',function(){
        alert('something else!');
    });

    $(function(){
        var content = $('#content');
        var html = content.html();
        for(var word in wordsAssigned){
            html = html.replace(new RegExp(word,"gm"),'<span onmouseover="wordsAssigned[\''+word+'\']()">'+word+'</span>');
        }
        content.html(html);
    })
</script>