javascript - 悬停时如何向网页上的单词添加弹出(工具提示)定义？

Question

我的 250 页网站有一个词汇表，其中包含许多单词及其定义。我想找到一种方法，让词汇表中的单词在网站文本中出现时突出显示，并在悬停时显示一个“工具提示”气泡，显示单词的定义。我的网站页面都是 html -- 我没有使用 CMS。

我想我需要为此使用 javascript。我看了又看，发现可以突出显示某些文本的 javascript 函数(即将它包装在 span 标记中)，但我不知道如何让它遍历单词数组并包含它们的定义，我'我不确定这会占用多少资源。

是否存在一个词汇表类型的程序可以为我工作，而无需手动更新整个网站中每个单词的每个实例？还是有一种相当直接的方法来实现这一目标？谢谢!

Answer 1

这可以使用 JQuery 完成，并将词汇表作为页面上的隐藏 div，如果需要，可以使用 AJAX 加载它。

$("#glossary h2").each(function(index) {
  // Get the word and its definition.
  var word = $(this).text();
  var def = $("#glossary").find("p")[index].innerHTML;

  // Update all instances of that word in the content page with mouse over def.
  var contentHTML = $("#content").html();
  contentHTML = contentHTML.replace(new RegExp(word, 'g'), '<span title="' + def + '">' + word + '</span>');
  $("#content").html(contentHTML);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="content">
  Will likes to hang out with Jim.
</div>

<div id="glossary" style="display:none;">
  <h2>Will</h2>
  <p>This is will's def.</p>
  <h2>Jim</h2>
  <p>This is jim's def.</p>
</div>

以上函数假定您有一个 <p>对于每个 <h2>并且 <p> 的所有内容是定义的一部分。