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

Question

我正在使用 Node、Express 和 ejs 创建一个 Web 应用程序。在同一页面上，我生成了一组按钮（下面的第一个表）和一组相应的隐藏divs（下面的第二个表）。单击按钮时，我想显示相应的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

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

在您的第一个循环生成按钮中，为每个按钮添加一个处理程序，该处理程序显示具有一些唯一 ID 的 div（例如按钮 12 的 streamDetailsModal12）；如果你使用引导程序或类似的东西，你甚至不必实现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 属性或你想控制可见性的其他东西。

Answer 2

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