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>

它存储在数据库（一个表）中，我们不能在 HTML 输出中更改它，只能在 HTML 模板 + JS 中进行后处理。

我们希望在页面加载后自动将参考书目部分的文本附加到文本中对应的数字。当鼠标悬停在文本中的数字上时，用 JS 或 CSS 显示它（我们可以这样做）。但我们无法找到如何制作搜索/附加技巧部分的解决方案。

有人解决过类似的任务吗？或者有什么建议或更好的例子？

PS：参考书目每次都以“<h3>参考书目</h3>”开头，位于全文底部。每本书都以“[number]”开头。

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 在这些情况下的性能可能不会太好。

另一种选择是使用预先存在的插件，例如这个。

于 2014-02-04T22:31:09.887 回答