如何在悬停时用从节点 js 控制器发送的变量替换 EJS 模板中的文本？

Question

我的 EJS 文件中有以下代码片段（作为节点应用程序的一部分）。

<% for(var i = 0; i < documents.length; i++) { %>
    <li><%= documents[i] %></li>
    <h4 hidden> <%= my_dict[documents[i]] %></h4>

<% } %>



<script>
    $('li').hover(
        function () {
            const doc_text = $('.plain').text()
            const doc_mapping = my_dict[doc_text]
            $(this).replaceWith(doc_mapping);
        }
    );
</script>

在这里， my_dict是一个字典， documents是一个从我的节点 js 控制器传递的数组

我基本上需要在悬停时用文本my_dict[text]循环中每个<li>标签的文本。 我尝试使用上面的脚本这样做，但它不起作用。 我还尝试将文本包含在保持隐藏的<h4>标签中，并用它来替换文本。
但是每次我将鼠标悬停在<li>标签中的文本上时，它都会被循环的所有标签中的所有文本替换。 可能是因为我无法将每个<li>唯一地映射到每个<h4>标签。

任何帮助都非常感谢。

Answer 1

如果我很了解您的问题，这里有一个简单的解决方案。

<% for(var i = 0; i < documents.length; i++) { %>
    <li onmouseenter="hover(this, '<%= my_dict[documents[i]] %>')" onmouseleave="hover(this, '<%= documents[i] %>')"><%= documents[i] %></li>
    <h4 hidden> <%= my_dict[documents[i]] %></h4>
<% } %>

<script>
function hover(el, str) {
    el.innerHTML = str;
}
</script>