JSTL循环中JS获取隐藏输入框ID值问题求助

你遇到的问题核心是HTML中id属性必须唯一，但你通过<c:forEach>循环生成了多个id="commentUserId"的隐藏输入框。当用$('#commentUserId')查找元素时，jQuery只会返回页面中第一个匹配该id的元素，所以每次点击按钮都只能拿到第一行的数据。

下面提供两种简单有效的解决方案：

方案一：利用DOM相对位置查找（保留隐藏框） #

首先，先去掉隐藏框的重复id（避免不符合HTML规范），然后通过按钮的位置关联到同一行的隐藏框：

修改后的页面代码 #

<c:forEach items="${commentList}" var="items">
  <div class="media" style="padding: 10px 0">
    <div class="media-body">
      <!-- 去掉重复的id，只保留name属性 -->
      <input type="hidden" name="commentUserId" value="${items.accountId.accountId}"/>
      <a id="${items.commentId}" name="btnReportComment" class="btn btn-report">Report</a>
    </div>
  </div>
</c:forEach>

修改后的JavaScript代码 #

$('a[name=btnReportComment]').click(function() {
  // 找到当前按钮所在的.media-body容器，再查找里面的隐藏输入框
  var commentUserId = $(this).closest('.media-body').find('input[name=commentUserId]').val();
  alert(commentUserId);
})

方案二：用按钮的data属性存储数据（更简洁，无需隐藏框） #

直接把用户ID存到按钮的自定义data属性里，省去隐藏框，代码更简洁：

修改后的页面代码 #

<c:forEach items="${commentList}" var="items">
  <div class="media" style="padding: 10px 0">
    <div class="media-body">
      <!-- 把用户ID存在按钮的data属性中 -->
      <a id="${items.commentId}" name="btnReportComment" class="btn btn-report" 
         data-comment-user-id="${items.accountId.accountId}">Report</a>
    </div>
  </div>
</c:forEach>

修改后的JavaScript代码 #

$('a[name=btnReportComment]').click(function() {
  // 直接从按钮的data属性中获取值
  var commentUserId = $(this).data('commentUserId');
  alert(commentUserId);
})

两种方案都能解决你的问题，方案二更推荐，因为它减少了不必要的DOM元素，代码逻辑也更清晰。

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