1

私たちのウェブサイトには、次のような専門的な本の記事があります。

<h2>Article heading</h2>
<p>Text text text text text text[1] text text text text.</p>
<p>Text text text text text text text text text text.</p>
<p>Text text text[2] text text text text text text text.</p>
<p>Text text text text text text text text text text.</p>
<h3>Bibliography</h3>
<p>[1] NAME OF AUTHOR, Book, ISBN, etc.</p>
<p>[2] NAME OF ANOTHER AUTHOR, Book 2, ISBN, etc.</p>

これはデータベース (1 つのテーブル) に保存され、HTML 出力では変更できず、HTML テンプレート + JS で後処理されるだけです。

ページロード後、参考文献セクションのテキストがテキスト内の対応する番号に自動的に追加されるようにしたいと考えています。テキスト内の数字の上にマウスを置いたときに JS または CSS で表示するよりも (それは可能です)。しかし、検索/追加のトリック部分を作成する方法を見つけることができません。

誰かが同様のタスクを解決しましたか? または、いくつかの提案やより良い例がありますか?

PS: 参考文献は常に「<h3>参考文献</h3>」で始まり、テキスト全体の下部にあります。すべての本は「[番号]」で始まります。

4

1 に答える 1

1

制限と、HTML 出力内の識別要素の重大な欠如を考慮すると、これを行う本当に良い方法はありません...それでも可能です。次のようなことを試すことができます：

最初に参考文献項目の配列を作成します。

var biblioArr = [];
var i = 1;
// Create array of bibliography items.
$("h3").nextAll("p").each(function(){ // Find each <p> after <h3>
    biblioArr[i] = $(this).html(); // Add <p> html to array
    i = i+1;
});

テキスト内の対応するマーカーを見つけて、HTML を変更します。

i = 1;
// Add each array item to corresponding text as anchor titles.
$("h2").nextUntil("h3").each(function(){ // Find each <p> after <h2> until <h3>
    var textHtml = $(this).html(); // Grab the content of <p>
    if (textHtml.indexOf("["+i+"]") >= 0) { // If index found in this <p>
        textHtml = textHtml.replace("["+i+"]", "[<a href='#' class='biblio-anchor' title='"+biblioArr[i]+"'>"+i+"</a>]"); // Create new anchor
        $(this).html(textHtml); // Add new content
        i = i+1;
    }
});

これは動作中の jsfiddleです。

ロールオーバー/ポップアップ/タイトル/ツールチップのスタイルは自由に設定できます。

これは、参考文献項目が常に順番に表示されることを前提としていることにご注意ください (つまり、2 は常に 1 の後に続きます)。また、この種のものはサーバー側の実行に適していることに注意してください。これらの状況での jquery のパフォーマンスはあまり良くない可能性があります。

もう 1 つの方法は、このような既存のプラグインを使用することです。

于 2014-02-04T22:31:09.887 に答える