无法通过JavaScript获取EJS模板中正确UserID的问题求助

问题说明 #

我正在开发一个网站，想用AJAX在页面加载完成后加载数据。采用EJS模板展示用户数据，并在EJS模板中引入了JavaScript文件。需要根据数据库中的数据为每个用户设置复选框，尝试多种方式从模板中获取正确的UserID以加载对应数据。直接在模板中显示UserID能得到正确值，但JavaScript文件中弹出的始终是第一个模板的ID，请问如何获取每个迭代/模板对应的正确ID？

相关代码 #

EJS模板文件（actor-item.ejs） #

<article class="post-item" id="<%= user.UserID %>" data-userId="<%= user.UserID %>">
  <p><span id="">
      <%= user.Email %>
      <input type="hidden" class="hiddenField" id="userid" name="userid" value="<%= user.UserID %>" required>
      <p><%= user.UserID %></p>
        <% for (const cat of categories) { %>
          <p>
            <input type="checkbox" id="<%= cat.CategoryID %>" value="<%= cat.CategoryID %>">
            <label for="<%=cat.CategoryID %>"><%= cat.CategoryName %></label>
          </p>
          <% } %>
    </span></p>
</article>
<script type="text/javascript" src="/javascript/usercategories.js" charset="utf-8"></script>

JavaScript文件（usercategories.js） #

async function fetchUserCategories() {
    let hidden = document.querySelector(".hiddenField");
    let article = document.querySelector(".post-item");
    //alert('USerID = ' + article.dataset.userId)
    alert('USerID = ' + hidden.value)

    }

fetchUserCategories();

主EJS页面部分代码 #

<% if (!users || users.length===0) { %>
    <p>No users found!</p>
    <% } else { %>
        <ol id="posts-list">
            <% for (const user of users) { %>
                <li>
                    <%- include('includes/actor-item', { user: user, categories: categories }) %>
                </li>
                <% } %>
        </ol>
        <% } %>

问题根源 #

1. document.querySelector()只会返回匹配到的第一个元素，所以无论循环生成多少个用户条目，每次只能拿到第一个用户的ID。
2. 将<script>标签放在循环的EJS模板中，会导致每个用户条目都重复加载一次JS文件，重复执行fetchUserCategories()，既冗余又会引发逻辑错误。
3. 复选框ID存在重复问题：多个用户条目里的同分类复选框ID相同，违反了页面ID唯一性的规则，会导致交互异常。

解决方案 #

步骤1：调整JS文件引入位置 #

移除EJS模板中的<script>标签，将JS文件引入移到主页面的</body>标签前，确保只加载一次：

<!-- 主EJS页面底部 -->
<script type="text/javascript" src="/javascript/usercategories.js" charset="utf-8"></script>
</body>

步骤2：修改JavaScript逻辑，遍历所有用户条目 #

更新usercategories.js，遍历所有用户条目并逐个处理：

async function fetchUserCategories() {
    // 获取所有用户条目元素
    const userArticles = document.querySelectorAll('.post-item');
    
    // 遍历每个用户条目
    userArticles.forEach(async (article) => {
        // 从data属性获取UserID（推荐方式）
        const userId = article.dataset.userId;
        // 也可以从当前条目内的隐藏字段获取：
        // const userId = article.querySelector('.hiddenField').value;
        
        console.log('UserID = ' + userId);
        
        // 此处添加AJAX请求逻辑，根据userId加载对应分类数据
        // 示例：
        // const response = await fetch(`/api/user-categories/${userId}`);
        // const userCategories = await response.json();
        
        // 根据返回的分类数据勾选对应复选框
        // userCategories.forEach(catId => {
        //     const checkbox = article.querySelector(`#${userId}-${catId}`);
        //     if (checkbox) checkbox.checked = true;
        // });
    });
}

// 确保DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', fetchUserCategories);

步骤3：修复复选框ID重复问题 #

修改EJS模板中的复选框代码，为ID添加UserID前缀，保证页面内ID唯一：

<% for (const cat of categories) { %>
  <p>
    <input type="checkbox" id="<%= user.UserID %>-<%= cat.CategoryID %>" value="<%= cat.CategoryID %>">
    <label for="<%= user.UserID %>-<%= cat.CategoryID %>"><%= cat.CategoryName %></label>
  </p>
<% } %>

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