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

【问题标题】：How do I replace text in an EJS template on hovering with a variable sent from a node js controller?如何在悬停时用从节点 js 控制器发送的变量替换 EJS 模板中的文本？
【发布时间】：2020-03-29 16:51:47
【问题描述】：

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

<% 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 控制器传递的数组

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

非常感谢任何帮助。

【问题讨论】：

标签： javascript jquery html node.js ejs

【解决方案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>

【讨论】：