使用 id 的 ejs 和 javascript 循环答案

【问题标题】：loop with id's ejs and javascript使用 id 的 ejs 和 javascript 循环
【发布时间】：2022-01-10 10:54:41
【问题描述】：

我有这个：

<thead class="thead-light">
                  <tr>
                    <th>Date (YYYY/MM/DD)</th>
                    <th>Exercise</th>
                    <th>WEIGHT</th>
                    <th>REPS</th>
                    <th>DURATION</th>
                    <th id="showclientusername">CLIENT USERNAME</th>
                    <th>Actions</th>

                  </tr>
                </thead>
                <tbody>
                    <% if (data.length) {
                        for(var i = 0; i < data.length; i++) { %>
                              <% if (data.length <=4) { %>
                                <style>
                                  #vact {
                                    height: 200px;
                                  }
                                </style>
                             <% } %>
                  <tr>
                    <td><%=data[i].DATE%></td>
                    <td><%=data[i].EXCERCISE%></td>
                    <td><%=data[i].WEIGHT%></td>
                    <td><%=data[i].REPS%></td>
                    <td><%=data[i].DURATION%></td>
                    <td id="isusername"><%=data[i].USERNAME%></td>
                        <script>
                        if ('<%= clientUsername %>' == '<%= trainerUsername %>') {
                            $('#isusername').css("visibility", "visible");
                             console.log("it is equal!")
                        } else {
                            $('#isusername').css("display", "none")
                            $('#showclientusername').css("display", "none")
                            console.log("false")
                        }
                        </script>

然后发生的情况是，当我点击特定页面时，<%= clientUsername %> 和 <%= trainerUsername %> 不相等，这很好，没错，它会记录 false。但是，我认为这是因为我覆盖了id，它第一次遍历循环（表中的第一行）时，它隐藏了所有应该做的事情，并且做到了：$('#isusername').css("display", "none") 完美。但随后它会在循环中运行第二次、第三次、第四次等时间，实际上是显示这些值。所以第一个总是隐藏的，但之后每次都不会隐藏。

我认为这与我正在覆盖<td id="isusername" 的事实有关，因为我处于循环中，但不知道如何修复它。提前感谢您的帮助

【问题讨论】：

无关：你为什么在 for 循环中多次写 <style>#vact { height: 200px }</style>？
您还将得到包含td 和isusername id 的多行。 ID 应该是唯一的。
@J.Titus 是的，这就是我认为我遇到的问题。那么有什么办法可以解决这个问题吗？

标签： javascript ejs

【解决方案1】：

这可能有效。我不知道clientUsername 和trainerUsername 来自哪里，但我假设您将它们作为渲染函数的一部分传递到对象中。在这种情况下，真的不需要在 HTML 中写入 <script> 标签 - 您可以根据客户端/培训师的比较直接在标记中设置 CSS display 属性。

<thead class="thead-light">
  <tr>
    <th>Date (YYYY/MM/DD)</th>
    <th>Exercise</th>
    <th>WEIGHT</th>
    <th>REPS</th>
    <th>DURATION</th>
    <th
      style="display: <%= clientUsername == trainerUsername ? 'table-cell' : 'none' %>"
    >
      CLIENT USERNAME
    </th>
    <th>Actions</th>
  </tr>
</thead>
<tbody>
  <% if (data.length) { if (data.length < 5) { %>
  <style>
    #vact {
      height: 200px;
    }
  </style>
  <% } for(var i = 0; i < data.length; i++) { %>
  <tr>
    <td><%=data[i].DATE%></td>
    <td><%=data[i].EXCERCISE%></td>
    <td><%=data[i].WEIGHT%></td>
    <td><%=data[i].REPS%></td>
    <td><%=data[i].DURATION%></td>
    <td
      style="display: <%= clientUsername == trainerUsername ? 'table-cell' : 'none' %>"
    >
      <%=data[i].USERNAME%>
    </td>
  </tr>
  <% } } %>
</tbody>

【讨论】：

感谢您的回答。所以我有点困惑。当我在其中添加它时，它会一直显示所有内容，但它应该只显示<%= clientUsername %>' == '<%= trainerUsername %>' 的单元格。我不确定trainerUsername ? 'table-cell'（问号）在那里做什么。希望你能解释一下这是什么意思，谢谢！如果它更容易，我也可以分享整张桌子。
问号是三元 if 语句的一部分。 comparison ? resultIfTrue : resultIfFalse
好的，谢谢你的解释。欣赏它

【解决方案2】：

我能够通过在每个 id 的 isusername 中包含 <%= i %> 来解决这个问题。

像这样：

<td id="isusername<%= i %>"><%=data[i].USERNAME%></td>
                        <script>
                        if ('<%= clientUsername %>' == '<%= trainerUsername %>') {
                            $('#isusername<%= i %>').css("visibility", "visible");
                             console.log("it is equal!")
                        } else {
                            $('#isusername<%= i %>').css("display", "none")
                            $('#showclientusername').css("display", "none")
                            console.log("false")
                        }
                        </script>

【讨论】：