如何在ejs模板的for循环中为每个html元素创建唯一的id？答案

【问题标题】：How to create unique id for each html elements inside a for loop in ejs template?如何在ejs模板的for循环中为每个html元素创建唯一的id？
【发布时间】：2017-09-07 00:21:55
【问题描述】：

$(document).ready(function() {
  $('#hiddentext').hide();

  $("#show").click(function() {
    $('#currenttext').hide();
    $('#hiddentext').show();
  });
});

<% for (var ans of quest.answers) { %>
  <div id="currenttext"><%= ans.text %></div>
  <div id="hiddentext"><%= ans.description %></div>
  <a id="show" class="btn btn-sm btn-primary">show</a>
<% } %>

我的for 循环中有多个显示按钮及其关联的HTML 元素。我在为每个 HTML 元素创建唯一的 ids 时遇到问题。就目前而言，单击任何显示按钮时，该功能将应用于所有其他 HTML 元素，而不是仅应用于其关联元素。我也有一个独特的_idans 属性，即ans._id，但我不知道如何利用它为我的 HTML 标记创建一个唯一 ID，以及如何在我的 jQuery 函数中使用该唯一 ID .

【问题讨论】：

<div id="<%= ans._id %>"> 或 <div id="some-prefix-<%= ans._id %>">。

标签： javascript jquery html express ejs

【解决方案1】：

用 css 隐藏隐藏的，以便在页面加载时立即隐藏。

将每个组包装在一个容器中并使用类和遍历

$('.show').click(function() {
  $(this).siblings().toggle();
})

.hiddentext {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="currenttext">Answer #1</div>
  <div class="hiddentext">Descrip #1</div>
  <a class="show btn btn-sm btn-primary">Show</a>
</div>
<div>
  <div class="currenttext">Answer #2</div>
  <div class="hiddentext">Descrip #2</div>
  <a class="show btn btn-sm btn-primary">Show</a>
</div>
<div>
  <div class="currenttext">Answer #3</div>
  <div class="hiddentext">Descrip #3</div>
  <a class="show btn btn-sm btn-primary">Show</a>
</div>

【讨论】：

我也在考虑切换，但他们不是兄弟姐妹，直到我把它们变成兄弟姐妹然后我忘记了切换；） - 如果没有变化可能会更优雅
@LuísMelo 这是怎么回事？该链接无效...返回 404

【解决方案2】：

不需要ID

$(document).ready(function() {
  $('.hiddentext').hide(); // can be done in CSS
  $(".show").click(function() {
    $(this).prevAll('.currenttext').hide();
    $(this).prevAll('.hiddentext').show();
    // or $(this).siblings().toggle() as suggested in other post
  });
});

<% for (var ans of quest.answers) { %>
  <div>
    <div class="currenttext"> <%= ans.text %> </div>
    <div class="hiddentext"> <%= ans.description %> </div>
    <a class="show" class="show btn btn-sm btn-primary">show</a>
  </div>
<% } %>

【讨论】：