Question

我有一组answer个对象，我在ejs中使用for循环将它们显示给用户。答案对象具有id，text和布尔correct属性。

<% answers.forEach((answer)=>{ %>
  <li>
    <p><%=answer.text%></p>
    <button>CORRECT</button>
  </li>
<%})%>

我希望用户能够单击正确的答案并让我的脚本发送已点击到服务器的答案的id，以便我可以更新该特定的correct属性在我的Mongo数据库中回答。可能是这样的：

$(the_button_clicked).click((event)=>{
  $.ajax({
    sending the correct answer to the database
  });
});

问题是这是一个列表，我不知道如何将每个特定答案链接到正确的按钮。我可以在按钮元素中添加一个类或id并将其设置为answer.id，但我想知道是否有更好的方法。我觉得这应该是一种常见的模式。

Answer 1

您可以使用data-attribute在HTML中存储自定义数据。将按钮分类也可能是个好主意。

<% answers.forEach((answer)=>{ %>
  <li>
    <p><%=answer.text%></p>
    <button class="correct" data-id="<%=answer.id%>">CORRECT</button>
  </li>
<%})%>

在您的jQuery中，为您的按钮创建一个onclick处理程序，并使用this.dataset.id或$(this).data('id')获取其相关ID;

$('button.correct').click(function () {
    var id = this.dataset.id;
    // do something with id 
});

<强>演示

$(function() {
  $('button.correct').click(function() {
    console.clear();
    console.log("this.dataset.id", this.dataset.id);
    console.log("$(this).data('id')", $(this).data('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <p>A</p>
    <button class="correct" data-id="1">CORRECT</button></li>
  <li>
    <p>B</p>
    <button class="correct" data-id="2">CORRECT</button></li>
  <li>
    <p>C</p>
    <button class="correct" data-id="3">CORRECT</button></li>
</ul>

Answer 2

您可以像这样实现它！

<% for(var i=0;i<myObj.length;i++) { %>

<span onclick="getId('<%=myObj[i].id%>')"><%=myObj[i].name%></span>

<% } %>

将按钮链接到ejs中的列表元素

2 个答案: