當單擊文本中的某個單詞時，創建一個彈出框

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

希望這可以幫助你。