当单击文本中的某个单词时，创建一个弹出框

Question

我目前正在为我的老师制作一个教科书成网站，但遇到了问题。 我有一个div，其中包含外语文本。 这些单词中的一些（但不是全部）将是可单击的，这将导致出现一个带有单词翻译的弹出框。 我不知道如何创建这样的东西。

谢谢！

Answer 1

尝试创建一个具有与翻译项之一相同的属性的对象，当元素单击时，选择具有翻译文本的对象的属性，该对象内的属性的警报值

 var words = { "salve": "hello" }; var elems = document.getElementsByTagName("a"); Array.prototype.slice.call(elems).forEach(function(el) { el.onclick = function(e) { e.preventDefault(); alert(words[this.hash.slice(1)]) } }) 

 <div> text <a href="#salve">salve</a> </div> 

Answer 2

您可以在此处使用jQuery的模式对话框小部件。

您可以做的就是跟踪JSON中的所有单词及其含义，如下所示：

var messages = {
    "lorem": "Explanation about Lorem.",
    "dolor": "Explanation about dolor."
};

并以可区分您的单词的方式创建标记，如下所示：

<div class="content">
    <span>Lorem</span> ipsum <span>dolor</span>.
</div>
<!-- will be used by jQuery's dialog widget. -->
<div id="dialog" title=""></div>

我已经用span容器包装了“ Lorem”和“ dolor”。

您可以使用跨度的CSS模拟链接，如下所示：

.content span {
    text-decoration: underline;
    cursor: pointer;
}

现在，将使用jQuery提供实际功能，如下所示：

$(".content").on("click", "span", function(e) {
    e.stopPropagation();
    var $this = $( this ),
        _text = $this.text();

    var dialogContent = messages[_text.toLowerCase()];
    if(dialogContent && dialogContent.length > 0) {
        $( "#dialog" ).dialog({
            "modal": true,
            "title": _text
        }).html(dialogContent);
    }
});

我在这里创建了一个快速演示

您可以在此处探索jQuery的Dialog Widget API

希望这可以帮助你。