4

私の250ページのWebサイトには、多くの単語とその定義が記載された用語集があります。ウェブサイトのテキストに表示されるたびに用語集の単語を強調表示し、ホバーすると単語の定義を示す「ツールチップ」バブルを表示する方法を見つけたいと思います。私のウェブサイトのページはすべてhtmlです-私はCMSを使用していません。

これにはjavascriptを使用する必要があると思います。私は調べて見て、特定のテキストを強調表示できる（つまり、スパンタグでラップする）javascript関数を見つけましたが、これを単語の配列を反復処理してその定義を含める方法がわかりません。 mこれがどれほどリソースを消費するかわからない。

Webサイト全体で各単語のすべてのインスタンスを手動で更新しなくても機能する用語集タイプのプログラムはありますか？または、これを達成するためのかなり簡単な方法はありますか？ありがとう！

4

1 に答える 1

5

これは、JQuery を使用して行うことができ、必要に応じて AJAX を使用してロードできるページ上の非表示の div に用語集を配置できます。

$("#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>の for every<h2>があり、のすべての内容が<p>定義の一部であることを前提としています。

于 2012-04-11T14:46:18.210 に答える