如何在EJS中为按钮关联对应列表项的answer对象ID？

这确实是动态列表交互里的常见场景，不用给每个按钮加唯一ID也能完美解决，下面是几种最常用且优雅的实现方式：

推荐方案：HTML5 Data属性 + 事件委托 #

这是最符合现代前端实践的做法，既语义清晰又性能友好：

修改后的EJS代码 #

给每个按钮添加data-answer-id属性，直接存储对应answer的ID：

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

前端JS逻辑（jQuery） #

用事件委托绑定到列表的父容器（比如包裹这些li的<ul id="answers-list">），这样不管列表是静态渲染还是动态新增的元素，事件都能生效：

// 绑定到父容器，监听按钮点击
$('#answers-list').on('click', 'button[data-answer-id]', function(event) {
  // 从按钮的data属性里拿到对应answer的ID
  const answerId = $(this).data('answer-id');

  // 发送AJAX请求到服务器
  $.ajax({
    url: '/api/answers/update-correct', // 替换成你的后端接口地址
    method: 'PUT', // 推荐用PUT做更新操作，符合REST规范
    data: { 
      answerId: answerId,
      correct: true // 要更新的correct属性值
    },
    success: function(response) {
      // 请求成功后的UI反馈，比如禁用按钮防止重复点击
      $(event.currentTarget)
        .prop('disabled', true)
        .text('CORRECTED');
    },
    error: function(xhr) {
      console.error('更新失败:', xhr.responseText);
      // 可以在这里添加错误提示，比如弹窗
    }
  });
});

为什么这个方案好？ #

• data-*属性是HTML5标准，专门用于存储自定义数据，语义明确，不会污染ID空间
• 事件委托只绑定一次事件，比给每个按钮单独绑定更高效，尤其是答案数量较多时
• 代码简洁，不需要维护大量唯一ID，后期维护更轻松

备选方案：利用DOM层级关联 #

如果更倾向于把数据存在父元素上，也可以通过DOM层级关系获取对应ID：

EJS代码 #

把answer的ID存在<li>元素的data属性里：

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

JS逻辑 #

点击按钮时，通过closest()方法找到父级的<li>，再取出ID：

$('#answers-list').on('click', '.answer-item button', function() {
  const answerId = $(this).closest('.answer-item').data('answer-id');
  // 后续AJAX逻辑和上面一致
});

额外注意事项 #

1. 后端验证：一定要在后端验证传入的answerId是否合法，防止恶意用户篡改请求参数
2. UI状态更新：成功更新后记得修改按钮状态（比如禁用、改变文字），避免用户重复提交
3. 原生JS替代：如果不用jQuery，逻辑类似——用addEventListener绑定到父容器，通过event.target判断是否是按钮，再通过event.target.dataset.answerId获取ID

内容的提问来源于stack exchange，提问作者dazzaondmic