如何在 ejs 文件中使用传递的变量

Question

所以我正在尝试将 ejs 文件中的 html 标记的值更改为我在 JavaScript 文件

中声明的变量

let checkbox = document.querySelector('input[name="plan"]');

checkbox.addEventListener('change', function () {
    if (this.checked) {
        document.querySelector('.plan-title').innerHTML = investment.name;
        document.querySelector('.plan-description').innerHTML = investment.description;
    }
    else {
        document.querySelector('.plan-title').innerHTML = '';
        document.querySelector('.plan-description').innerHTML = '';
    }
});

因此，当我直接传递它时，它会显示，但我希望它是动态的，虽然当我单击复选框时它会传递，但它似乎没有任何价值。

<%- include('../partials/sidebar'); %>
    <% if(currentUser && currentUser.isAdmin){ %>
        <a href="/investment/new">Add New Plan</a>
        <% } %>
            <div class="container">
                <h1>Investments</h1>

                <% investments.forEach((investment)=>{ %>
                    <div class="col-md-4">
                        <div class="card">
                            <strong>
                                <%= investment.name %>
                            </strong>
                            <h4>
                                <%= investment.min %> - <%=investment.max %>
                            </h4>
                            <p>
                                <%= investment.caption %>
                            </p>
                            <p><input type="checkbox" name="plan" id="">Choose investment</p>
                        </div>
                        <% if(currentUser && currentUser.isAdmin){ %>
                            <a href="/investment/<%= investment._id %>/edit">Edit</a>
                            <a href="/investment/new">Delete</a>
                            <% } %>

                    </div>

                    <% }) %>

                        <% investments.forEach((investment)=>{ %>
                            <div class="">
                                <div><strong>Package: </strong>
                                    <p class="plan-title">
                                    </p>
                                </div>
                                <p class="plan-description">

                                </p>
                                <input type="number" name="" id="" min="<%= investment.min %>"
                                    max="<%= investment.max %>">
                            </div>


                            <% }) %>


            </div>

            <%- include('../partials/footer'); %>

我似乎无法解决这个问题，需要帮助谢谢！

Answer 1

我不清楚您指的是什么变量，但是您在客户端脚本中设置的任何变量在您在服务器上呈现的 EJS 文件中都将不可用。服务器端 Node.js 代码和客户端 JavaScript 代码彼此不知道。

Answer 2

如果我没看错，您是在尝试在用户单击复选框时从 JavaScript 的 HTML 标记中插入 EJS 变量的值。

HTML 标签的值没有改变，因为在你的 JS 代码中：

    document.querySelector('.plan-title').innerHTML = investment.name;
    document.querySelector('.plan-description').innerHTML = investment.description;

investment.name 和 investment.description 未定义。检查您页面上的控制台。

这是因为您在页面完成呈现后尝试访问 EJS 变量。

EJS主要用于在页面渲染之前将服务器端变量传递给页面。因此，一旦呈现，您就无法访问这些变量。

因此，要在页面完成呈现后在 JavaScript 中获取这些变量的值，请尝试执行以下操作：

    document.querySelector('.plan-title').innerHTML = '<%- investment.name %>';
    document.querySelector('.plan-description').innerHTML = '<%- investment.description %>';

相反。这就是将 EJS 变量传递给 JavaScript 的方式。 JavaScript 现在将其视为一个字符串并且没有问题，这与您的代码不同，它正在寻找 investment 对象并返回未定义，因为该变量未在客户端定义。

此外，由于您在 HTML 部分有一个 for-each 循环，我假设您正在尝试更改特定 plan-title 和 plan-description div秒。如果是这样的话，JavaScript 部分中的 '<%= investment.name %>' 和 '<%= investment.description %>' 也应该在 for-each 循环中，但这会很混乱。

我建议你改为在HTML部分的for-each循环下面，根据for-each循环的索引将class添加到div标签，将更改事件添加到复选框，并将复选框和 for-each 循环的索引传递给将处理更改事件的 JavaScript 函数，将 EJS 变量包含在 plan-title 和plan-description divs，并在处理更改事件的 JavaScript 函数中将 CSS 显示属性从 display: none 更改为 display: block 这些 divs.

看例子：

HTML:

            <% investments.forEach((investment, index)=>{ %>
                <div class="col-md-4">
                    <div class="card">
                        <strong>
                            <%= investment.name %>
                        </strong>
                        <h4>
                            <%= investment.min %> - <%=investment.max %>
                        </h4>
                        <p>
                            <%= investment.caption %>
                        </p>
                        <p><input onchange="displayPlan(this, '<%= index %>')" type="checkbox" name="plan" id="">Choose investment</p>
                    </div>
                    <% if(currentUser && currentUser.isAdmin){ %>
                        <a href="/investment/<%= investment._id %>/edit">Edit</a>
                        <a href="/investment/new">Delete</a>
                        <% } %>

                </div>
                <% }) %>
                    <% investments.forEach((investment, index)=>{ %>
                        <div class="plan <%= index %>" style="display: none;">
                            <div><strong>Package: </strong>
                                <p class="plan-title">
                                 <%- investment.name  %>
                                </p>
                            </div>
                            <p class="plan-description">
                              <%- investment.description %>
                            </p>
                            <input type="number" name="" id="" min="<%= investment.min %>"
                                max="<%= investment.max %>">
                        </div>
                        <% }) %>

JavaScript:

    function displayPlan(checkbox, id){
        if (checkbox.checked) {
            document.querySelector(`.plan.${id}`).style.display = 'block';
        }
        else {
            document.querySelector(`.plan.${id}`).style.display = 'none';
        }
    }

干杯！

编辑：语法和句法问题

如何在 ejs 文件中使用传递的变量

How to use a passed variable in an ejs file

javascript

variables

ejs

node.js

express