javascript - 如何使用从 Node js Controller 发送的变量替换悬停时 EJS 模板中的文本？

Question

我的 EJS 文件中有以下代码片段(作为 Node 应用程序的一部分)。

<% 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是一个从我的 Node js Controller 传递的数组

我基本上需要替换每个 <li> 的文本循环中的标签带有文本 my_dict[text]悬停时。我尝试使用上面的脚本来执行此操作，但它不起作用。我还尝试将文本包含在 <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>