javascript 在Node/EJS中使用forEach改变模态内容

rn0zuynd 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(130)

- 情况：**我将一个对象数组（days）传递到EJS模板中，并运行一个forEach循环。每次迭代创建一张卡片、一个模态触发按钮和一个模态触发按钮。
- 问题：**创建每张卡和触发器模态按钮没有问题。但是，模态窗口仅显示第一次循环迭代（day[0]）的数据。
- 我的密码：**

部分股骨头：

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8" />
<title>Slope Notes</title>

<!-- CSS (load bootswatch from a CDN) -->
<link
rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@4.5.2/dist/minty/bootstrap.min.css" integrity="sha384 H4X+4tKc7b8s4GoMrylmy2ssQYpDHoqzPa9aKXbDwPoPUA3Ra8PA5dGzijN+ePnH" crossorigin="anonymous"/>

<!--  public/styles.css -->
<link rel="stylesheet" type="text/css" href="/styles.css" />

<!-- font-awesome kit -->
<script src="https://kit.fontawesome.com/46ee1546cc.js"
  crossorigin="anonymous"></script>

<head>
  <%- include('../partials/head'); %>
</head>

<body class="container">
  <header><%- include('../partials/header'); %></header>

  <% let formattedDate = ('0' + (days[0].date.getMonth()+1)).slice(-2) + '-' +
  ('0' + days[0].date.getDate()).slice(-2) + '-' + days[0].date.getFullYear() %>

  <div class="list-group page-title-container list-group-item active">
    <h2 class="page-title"><%= days[0].resortName %></h2>
    <h2 class="page-title"><%= formattedDate %></h2>
    <a class="btn-anchor btn-secondary" href="/date/new">
      <i class="fa-solid fa-plus"></i>
      Add Run
    </a>
  </div>

  <div class="card-columns">
    <% days.forEach((day, i) => { %>

    <div class="card bg-secondary container">
      <div class="row ard-header day-card-header-container">
        <div class="col"><%= day.runName %></div>
        <div class="col"><%= day.runDifficulty %></div>
        <div class="col">

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#runModal" data-whatever="<%= day.id%>">
  View
</button>

<!-- Modal -->
<div class="modal fade" id="runModal" tabindex="-1" role="dialog" aria-labelledby="runModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <h5 class="modal-title" id="runModalLabel"><%= day.runName %></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

      <div class="modal-body container">
        <div class="row">
          <div class="col">Rating: <%= day.runDifficulty %></div>
          <div class="col">Time (in min): <%= day.runTime %></div>
        </div>
        <div class="row">
          <div class="col">Weather: <%= day.weatherConditions %></div>
          <div class="col">Wind: <%= day.windConditions %></div>
        </div>
        <div class="row">
          <div class="col">Snow: <%= day.snowConditions %></div>
        </div>
        <div class="row">
          <div class="form-group">
            <label for="runNotes" class="form-label mt-4">Extra Notes:</label>
            <textarea class="form-control"  id="runNotes" rows="5" cols="55"><%= day.runNotes %></textarea>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
        </div>
      </div>
    </div>
    <% }) %>
  </div>

  <footer><%- include('../partials/footer'); %></footer>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

JavaScript

来源：https://stackoverflow.com/questions/71992727/varying-modal-content-using-foreach-in-node-ejs

1条答案

按热度按时间

8yoxcaq71#

找到问题所在以防其他人发现-
这个问题源于没有传递唯一的文档标识符。代码中的变化是在模态按钮的data-target和模态id中：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#runModal<%= _day.id %>"
  View
</button>

<!-- Modal -->
<div class="modal fade" id="runModal<%= day._id %>" tabindex="-1" role="dialog" aria-labelledby="runModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 在Node/EJS中使用forEach改变模态内容

1条答案

相关问题

热门标签

最新问答