使用forEach将MongoDB图片接入Bootstrap轮播的显示异常问题

核心问题 #

1. carousel-inner容器位置错误：你把carousel-inner放在了forEach循环内部，导致每一条数据都会生成一个独立的carousel-inner。Bootstrap轮播要求所有carousel-item必须放在同一个carousel-inner容器中，多个容器会让组件无法正常识别轮播项，因此只会显示第一个容器里的内容，控制按钮也失效。
2. 轮播指示器硬编码：当前指示器是固定3个，没有根据数据库返回的toyotas数组长度动态生成，数据数量变化时会出现不匹配的情况。
3. 重复ID问题：代码中id="car-caro"和id="millage"在循环中重复生成，ID必须唯一，会导致DOM元素识别异常，建议改为class。

修复后的EJS代码 #

<h5>Toyota Cars</h5>

<div id="car-slide" class="carousel slide" data-bs-ride="false">
  <div class="carousel-indicators">
    <% toyotas.forEach((toyota, inx)=>{ %>
      <button 
        type="button" 
        data-bs-target="#car-slide" 
        data-bs-slide-to="<%= inx %>" 
        <%= inx === 0 ? 'class="active" aria-current="true"' : '' %>
        aria-label="Slide <%= inx + 1 %>"
      ></button>
    <% }) %>
  </div>
  <div class="carousel-inner">
    <% toyotas.forEach((toyota, inx)=>{ %>
      <div class="carousel-item <%= inx === 0 ? 'active' : '' %>">
        <img src="<%= toyota.image %>" class="d-block w-100 car-caro" alt="<%= toyota.carName %>">
        <div class="carousel-caption d-md-block">
          <div class="arrow">
            <div class="mil">
              <p><i class="fa-solid fa-arrow-up-right-from-square millage"></i></p>
              <p><%= toyota.millage %></p>
              <h6 class="car-name"><%= toyota.carName %></h6>
              <div class="car-properties">
                <p><%= toyota.seater %></p>
                <p><%= toyota.mechnism %></p>
                <p><%= toyota.combustion %></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    <% }) %>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#car-slide" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#car-slide" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

修改说明 #

• 将carousel-inner移至forEach循环外部，确保所有轮播项都在同一个容器内。
• 动态生成轮播指示器：循环toyotas数组，根据索引生成对应data-bs-slide-to值的按钮，第一个按钮自动添加active状态。
• 将重复的id="car-caro"和id="millage"改为class，避免DOM ID冲突。
• 简化了active类的判断逻辑，用三元表达式替代if-else，代码更简洁。

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