使用 table 的值动态生成 onmouseover 标签

Question

所以，我有一个巨大的 table，只有两列 - 一个首字母缩略词列表和一个定义。 table 中的每个条目也有一个唯一的 ID，它恰好是每个首字母缩写词，除非一个首字母缩写词有多个定义，在这种情况下它是 xxx1、xxx2 等。列表中有近 800 个首字母缩略词。我怀疑我是否需要对这个列表做任何事情，因为它的格式已经很连贯了。

我还有一些相当大的博客条目，其中包含指向正确位置的链接；例如，在博客中使用 YYY 已经有一个指向“acronyms/#yyy”的超链接，或者根据需要对 XXX 的给定使用转到 acronyms/#xxx1 或 acronyms/#xxx2。这些链接很好用。有问题的博客条目已经写了好几年了，所以他们对 hand-jam 所有的 onMouseOvers 付出了太多的努力。

我想做的是写一些东西——很可能是 JS 和 CSS 的组合——它将从标签中的 id=xxx1 获取首字母缩写词/#xxx1 信息，并使用它将来自后续的文本放在 table 中作为博客中的悬停文本，而无需手写。在博客中已经有数千次使用首字母缩略词。

不幸的是，我什至不知道从哪里开始。我猜是因为我找不到我想做的事情的参考资料，可能因为某种原因还没有完成。

它最终会在哪里 - 如果我想做的事情是可能的 - 是作为站点的一部分 header 在 Ghost 博客中注入代码。但我只是在寻找一个开始。

Answer 1

如果我理解正确（有一些代码示例演示用例会有所帮助），您希望博客页面上的首字母缩略词显示您已经拥有的首字母缩略词词汇表中的首字母缩略词条目遵守。如果是这样，那么这就是我的答案...

首先，从一个页面请求数据，对其进行排序，select 所需的部分，然后在鼠标悬停事件中显示在另一个页面中并不是一件小事。如果您考虑一下，这将意味着在用户鼠标移动之前请求、下载和处理另一个页面。

但是，可以将首字母缩略词词汇表转换为更直接、更小的格式，以便在所需页面上使用它来填充您的首字母缩略词。存储此信息的一种选择可以是纯文本，例如...

[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.

objective 是为了避免手动编辑所有博客 post 的 <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>

...请参阅评论以获取说明...

[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 代码示例（请不要是整个页面！）修改您的问题，如果方便对此进行解释，请发表评论。

希望对您有所帮助。 ;)

使用 table 的值动态生成 onmouseover 标签

Using a table's values to dynamically generate onmouseover tags

javascript

css

ghost-blog