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

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

Answer 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>

Answer 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>
<% } %>