Question

$(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循环中有多个show按钮及其关联的HTML元素。我在为每个HTML元素创建唯一id时遇到问题。至于现在，在单击任何显示按钮时，该功能将应用于所有其他HTML元素，而不是仅应用于其关联元素。此外，我还有_id ans的唯一ans._id属性，但我不知道如何利用它来为我的HTML标记创建唯一的ID以及如何在我的jQuery函数中使用该唯一id。

Answer 1

无需身份证

$(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>
<% } %>

Answer 2

使用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>

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

2 个答案: