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>

我已经包裹了Lorem＆＃39;和＆＃39; dolor＆＃39;用span容器。

您可以使用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);
    }
});

我在here

上创建了一个快速演示

您可以浏览jQuery的Dialog Widget API here

希望这可以帮助你。

在

2 个答案: