如果我理解正确（有一些代码示例演示用例会很有帮助），您希望博客页面上的首字母缩略词显示您已经遵守的首字母缩略词词汇表中的首字母缩略词条目。如果是这样，那么这就是我的答案...
首先，从一个页面请求数据，对其进行排序，选择所需的部分，然后在鼠标悬停事件时显示在另一个页面中，这并不是一件容易的事。如果您考虑一下，这意味着在用户鼠标移动之前请求、下载和处理另一个页面。
但是，首字母缩略词词汇表可以转换为更直接、更小的格式，可以在所需页面上使用它来填充您的首字母缩略词。存储此信息的一种选择可以是纯文本，例如...
[acronym_glossary.txt]
aaa, description of acronym aaa
bbb, description of acronym bbb
...
xxx1, description of acronym xxx1
xxx2, description of acronym xxx2
yyy, description ... etc etc
另一种选择可能是 JSON - 它是一种基于文本的、人类可读的数据交换格式，可以通过 JavaScript 轻松处理，例如...
[acronym_glossary.json]
{
"aaa": "description of acronym aaa",
"bbb": "description of acronym bbb",
...
"xxx1": "description of acronym xxx1",
"xxx2": "description of acronym xxx2",
"yyy": "description ... etc etc"
}
我建议使用 JSON 格式，因为它与平台和应用程序无关，并且很容易被大多数编程语言处理。
更多关于使用 JSON 和 JavaScript 的信息可以在底部的链接中找到。
假设您有一个 JSON 格式的词汇表文件：acronym_glossary.json。
目的是避免手动编辑您所有博客文章的<a> 标签来添加所用首字母缩略词的描述。这可以通过一个小的 JS 程序来完成，该程序获取 JSON 文件，检查 <a> 标签 ID，然后在 <a> 标签 title 属性中插入相应的条目。此外，一旦此任务完成，脚本可以自行卸载。
现在假设您的 JS 程序包含在一个名为 acronym_insert.js 的文件中，并且您已在博客页面中添加了一个 <script> 标记。
<!-- HTML : blog page example -->
<script id="acronym-insert" src="path/to/acronym_insert.js"></script>
下面是一个示例，说明如何在已经提到的假设下实现这一点，包括首字母缩略词本身由<a> 标签的id 属性标识...
<a id="aaa" href="acronym/#aaa">aaa</a>
...有关描述，请参见 cmets...
[acronym_insert.js]
// when the pages content has been loaded...
document.addEventListener("DOMContentLoaded", function() {
// collect all the page's a-tags as an Array
var aTags = [].slice.call( document.querySelectorAll("a") ),
scriptTag;
// function using JS fetch API to request the
// JSON glossary and convert it to a JS Object
// with a fallback for older browsers
function grab(fn, path) {
var req;
window.fetch ? fetch(path).then(function(res) {
return res.status >= 200 && res.status < 300 ?
Promise.resolve( res.json() ) :
Promise.reject( new Error(res.statusText) );
}).then(fn).catch(function(err) {
console.log("! FETCH ERROR:", err);
}) : (
(req = new XMLHttpRequest()).addEventListener("readystatechange", function() {
4 === req.readyState && 200 === req.status && fn(
JSON.parse(req.responseText)
);
}, !1),
req.open("GET", path), req.send()
);
}
// grab the JSON file
grab(function(glossary) {
// 'glossary' = parsed JSON returned from grab()
// attach the keys to a variable as an Array
// e.g. [aaa, bbb, ... xxx1, xxx2, yyy ]
var glosKeys = Object.keys( glossary );
// iterate over the a-tags
aTags.forEach(function(tag) {
// iterate over the glossary keys and
// compare each one to the tag.id
glosKeys.forEach(function(key) {
// if tag.id === key then
tag.id === key && (
// add the description that matches
// the key in 'glossary'
tag.title = glossary[key]
);
});
}),
// after completion unload script
scriptTag = document.getElementById("acronym-insert"),
scriptTag.parentElement.removeChild( scriptTag )
}, "path/to/acronym_glossary.json")
}, !1);
发生了什么：
- 页面加载时调用
document的“DOMContentLoaded”事件处理函数。
- 在此函数中，页面上的所有
<a> 标签都收集在Array 中。
- 定义了一个函数
grab() 来获取acronym_glossary.json 文件并将其解析为一个JavaScript 对象。
- 此函数有两个参数： 1. 处理 JavaScript 对象的函数，以及； 2.
JSON文件的路径。
- 在函数内部，JS 对象的键值对的键以
Array 的形式分配给变量。
- 由于我们现在有 2 个数组，我们可以迭代其中一个，并通过迭代另一个将第一个与第二个中的信息进行比较。
- 标签
id 与glossary 键进行比较。
- 如果找到匹配项，则使用该键将首字母缩写词描述添加到
<a> 标记的title 属性。
- 完成后，脚本会识别并删除自身 - 如果出现 VLJ（非常大的 JSON）文件，这可能对浏览器性能有好处，但并非绝对必要，大多数浏览器会缓存文件，以便下次加载词汇表几乎无缝衔接。
另外。如果您的首字母缩略词词汇表页面的格式一致，那么收集信息并使用 JavaScript 构建 JSON 文件也相对容易——尽管 JSON 很容易手动编辑。请使用 HTML 代码示例修改您的问题（请不要使用整个页面！）如果对此的解释方便，请留下评论。
希望对您有所帮助。 ;)