Estoy creando una aplicación web usando Node, Express y ejs. En la misma página, genero un conjunto de botones (primera tabla a continuación) y un conjunto de div ocultos correspondientes (segunda tabla a continuación). Cuando se hace clic en un botón, quiero mostrar el div correspondiente.
<% 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> <% } %>Necesito que el contador en el primer ciclo cambie mientras el usuario hace clic en el botón de detalles del segundo ciclo.
Si desea seguir la lógica anterior... la forma posible será hacer una llamada al servidor al hacer clic en el botón, calcular el valor en el servidor y volver a mostrar la página en el front-end. El navegador Javascript no puede cambiar ni manipular la lógica o la variable ejs. Eso se hace en el servidor del nodo.
La forma normal de implementar dicha funcionalidad es hacer algo como esto:
en sus primeros botones de generación de bucles, agregue a cada botón un controlador que muestre el div con alguna identificación única (como streamDetailsModal12 para el botón 12); si usa bootstrap o algo similar, ni siquiera tiene que implementar el handler
<button class="btn btn-outline-success" data-toggle="modal" data-target="#streamDetailsModal<% i %>" id="detailsstream" onclick="handler(event)" > y a cada div que le gustaría mostrar al hacer clic en el botón, agregue las identificaciones correspondientes:
<div id="streamDetailsModal<% i %>" > some content </div> Si implementa el handler usted mismo, debe obtener la identificación de event.target (que es su botón que contiene el atributo data-target con la identificación que desea) y luego encontrar el elemento y alternar su propiedad de display o cualquier otra cosa que le gustaría controlar la visibilidad.