如何使用onclick函数改变ejs变量

Question

我正在使用 Node、Express 和 ejs 创建一个 Web 应用程序。在同一页面上，我生成了一组按钮（下面第一个 table）和一组相应的隐藏 div（下面第二个 table）。单击按钮时我想显示相应的 div.

<% for(var i = 0; i < stream.length; i++){ %>
<tr>
 <th scope="row"><%= stream[i].streamid %></th>
 <td><%= stream[i].streamname %></td>
 <td><%= stream[i].streamername %></td>
 <td> 
  <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal"
    id="detailsstream"
    onclick="<% ctr = i %>"
  >
  Details
  </button>
 </td>
 <td>
  <a
   class="btn btn-outline-danger"
   href="/stream/delete/<%= stream[i].streamid %>"
  >
  ⊖ Remove
  </a>
 </td>
</tr>
<% } %>

<% for(var i = 0; i < stream.length; i++){ %>
<tr>
  <th scope="row"><%= stream[i].streamid %></th>
  <td><%= stream[i].streamname %></td>
  <td><%= stream[i].streamername %></td>
  <td>
   <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal"
    id="detailsstream"
    data-ctr="<%= i %>"
   >
   Details
  </button>
 </td>
 <td>
  <a
   class="btn btn-outline-danger"
   href="/stream/delete/<%= stream[i].streamid %>"
  >
  ⊖ Remove
 </a>
</td>
</tr>
<% } %>

我需要在用户单击第二个循环中的详细信息按钮时更改第一个循环中的计数器。

Answer 1

如果您确实希望采用上述逻辑...可能的方法是在单击按钮时进行 服务器调用，计算服务器上的值，然后在前端重新渲染页面。浏览器 Javascript 无法更改或操作 ejs 逻辑或变量。那是在节点服务器上完成的。

Answer 2

实现此类功能的正常方法是改为执行以下操作：

在您的第一个循环生成按钮中，为每个按钮添加一个处理程序，该处理程序显示 div 和一些唯一的 ID（例如 streamDetailsModal12 用于按钮 12）；如果您使用 bootstrap 或类似的东西，您甚至不必实施 handler

  <button
    class="btn btn-outline-success"
    data-toggle="modal"
    data-target="#streamDetailsModal<% i %>"
    id="detailsstream"
    onclick="handler(event)"
  >

并为每个 div 您想要在按钮点击时显示的内容添加相应的 ID：

<div id="streamDetailsModal<% i %>"
> some content </div>

如果你自己实现handler，你必须从event.target中获取id（这是你的按钮持有data-target属性和你想要的id）然后找到元素并将其切换为 display 属性或您想要控制可见性的其他内容。

如何使用onclick函数改变ejs变量

How to use onclick function to change ejs variable

javascript

ejs

node.js

express