EJS渲染动态HTML时如何在onclick属性传动态参数实现项目画廊轮播

方案1：直接复用原有轮播逻辑，最小改动实现传参 #

原W3教程的整套轮播逻辑本身就是依赖连续数字索引匹配DOM顺序工作的，完全不需要传入MongoDB的项目_id，也没必要绕隐藏div的弯路。
EJS的forEach遍历本身就自带循环索引，你完全可以在渲染缩略图的时候，把对应轮播项的序号直接嵌进内联onclick里，完全兼容你已经写好的currentSlide、plusSlides、showSlides核心逻辑：

• 渲染轮播主容器时，正常遍历项目数据生成对应DOM即可：

<% projectdetails.forEach((project, index) => { %>
  <div class="mySlides fade">
    <img src="<%= project.coverImage %>" style="width:100%">
    <div class="text"><%= project.projectName %></div>
  </div>
<% }) %>

• 渲染底部缩略图列表时，同样遍历数据，直接把index + 1作为参数传入currentSlide（注意原W3逻辑的轮播序号是从1开始计数的，别漏了+1导致序号错位）：

<div class="row">
  <% projectdetails.forEach((project, index) => { %>
    <div class="column">
      <img class="demo cursor" 
           src="<%= project.thumbImage %>" 
           onclick="currentSlide(<%= index + 1 %>)" 
           alt="<%= project.projectName %>">
    </div>
  <% }) %>
</div>

• 最后只要把原有JS里硬编码的轮播总数替换成动态获取即可：

// 保持原有选择器逻辑，JS运行时会自动获取所有动态渲染生成的轮播项
const slides = document.getElementsByClassName("mySlides");
const thumbs = document.getElementsByClassName("demo");
// 剩下的showSlides、plusSlides、currentSlide逻辑和W3原版完全一致，不需要改动

这个方案改动量最小，之前写的所有轮播核心逻辑都可以直接复用。之前用隐藏div取值失败，大多是因为没有绑定当前点击元素和对应存储值的映射关系，拿值时容易出现错位，这种直接在渲染层嵌参数的方式完全不会有这类问题。

方案2：无内联参数绑定，用事件委托实现切换 #

如果你不想写内联的onclick事件，完全可以不往元素上传任何参数，靠DOM本身的顺序自动匹配轮播索引：

• EJS渲染缩略图时，不需要写任何点击绑定，只需要给所有缩略图加统一类名，保证DOM顺序和上方的轮播主容器一一对应：

<div class="thumb-group">
  <% projectdetails.forEach((project) => { %>
    <img class="gallery-thumb" src="<%= project.thumbImage %>" alt="<%= project.projectName %>">
  <% }) %>
</div>

• 用事件委托绑定一次点击事件，自动识别当前点击的缩略图对应的轮播序号，不需要手动传任何参数：

const thumbGroup = document.querySelector('.thumb-group');
const allThumbs = document.querySelectorAll('.gallery-thumb');

thumbGroup.addEventListener('click', (e) => {
  // 仅响应点击到缩略图的事件
  if (e.target.matches('.gallery-thumb')) {
    // 计算当前点击的缩略图在列表里的位置，+1适配原轮播的1起始计数
    const targetIndex = Array.from(allThumbs).indexOf(e.target) + 1;
    // 直接调用原有轮播的currentSlide函数即可
    currentSlide(targetIndex);
  }
})

这种方式不需要在渲染层做任何参数绑定，DOM结构更干净，也不会出现之前隐藏div取值错位的问题，更适合项目后续迭代维护。

注意：不管用哪种方案，都不要尝试把Mongo的ObjectId传入currentSlide函数——原轮播逻辑的工作原理是靠连续的数字索引匹配DOM节点，硬传入非数字的_id反而需要大幅改写已经跑通的核心轮播逻辑，完全没有必要。

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