如何通过点击id为next的HTML按钮将EJS模板中的let cpp=6修改为cpp=12

嘿，我来帮你搞定这个问题～首先得搞清楚：EJS是服务端渲染模板，你写的let cpp=6是在服务器端运行的，浏览器拿到的已经是渲染好的HTML了，根本看不到这个cpp变量，所以直接在客户端改它完全没用，得换个思路。下面给你两种实用方案，根据你的数据规模选就行：

方案1：前端已有完整数据，动态控制显示数量 #

如果你的cards数据量不大，已经一次性传到了前端，那可以用这种方式，不用再请求后端：

1. 先在EJS里把初始显示数量和完整的卡片数据传到前端JS：

<script>
  // 把服务端的初始数量和卡片数据同步到前端
  let currentShowCount = 6;
  const allCards = <%- JSON.stringify(cards) %>;
</script>

2. 修改EJS的循环逻辑，渲染所有卡片但默认只显示前6个：

<% cards.forEach((card, index) => { %>
<!-- 索引大于等于6的卡片默认隐藏 -->
<div class="card" <%= index >= 6 ? 'style="display: none;"' : '' %>>
  <li><%= card.name %></li>
  <li><%= card.price %></li>
  <li><%= card.title %></li>
  <li><%= card.inStore %></li>
  <li><%= card.code %></li>
</div>
<% }) %>

3. 给按钮添加点击事件，更新显示数量到12：

<script>
document.getElementById('next').addEventListener('click', () => {
  // 更新显示数量为12
  currentShowCount = 12;
  // 遍历所有卡片，控制显示/隐藏
  const cardElements = document.querySelectorAll('.card');
  cardElements.forEach((card, index) => {
    card.style.display = index < currentShowCount ? 'block' : 'none';
  });
  // 如果已经显示完所有卡片，隐藏按钮避免重复点击
  if (currentShowCount >= allCards.length) {
    document.getElementById('next').style.display = 'none';
  }
});
</script>

方案2：后端分页加载，请求更多数据 #

如果你的cards数据量很大，不想一次性传到前端，那可以用分页的方式，点击按钮时请求后端获取下一页数据：

1. 修改后端路由（以Express为例），支持分页参数：

app.get('/', (req, res) => {
  // 获取当前页码，默认第1页
  const page = parseInt(req.query.page) || 1;
  // 每页显示6条
  const perPage = 6;
  // 计算当前页的 데이터索引范围
  const startIndex = (page - 1) * perPage;
  const endIndex = startIndex + perPage;
  // 截取当前页的卡片数据
  const currentCards = cards.slice(startIndex, endIndex);
  // 判断是否还有更多数据
  const hasMore = endIndex < cards.length;
  // 渲染页面时传递当前页数据和是否有更多的标记
  res.render('index', { cards: currentCards, hasMore });
});

2. 调整EJS页面，只有还有更多数据时显示按钮：

<% cards.forEach((card) => { %>
<div class="card">
  <li><%= card.name %></li>
  <li><%= card.price %></li>
  <li><%= card.title %></li>
  <li><%= card.inStore %></li>
  <li><%= card.code %></li>
</div>
<% }) %>

<!-- 只有还有更多数据时显示按钮 -->
<% if (hasMore) { %>
<div><button id="next">load more</button></div>
<% } %>

3. 前端添加点击事件，请求下一页数据并插入页面：

<script>
let currentPage = 1;
const cardContainer = document.querySelector('.card-container'); // 假设你有个卡片容器

document.getElementById('next').addEventListener('click', async () => {
  currentPage++;
  // 请求下一页数据
  const response = await fetch(`/?page=${currentPage}`);
  const html = await response.text();
  // 解析返回的HTML，提取新的卡片元素
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = html;
  const newCards = tempDiv.querySelectorAll('.card');
  // 把新卡片插入到容器末尾
  newCards.forEach(card => {
    cardContainer.appendChild(card);
  });
  // 如果返回的页面里没有按钮了，说明没有更多数据，隐藏当前按钮
  if (!tempDiv.querySelector('#next')) {
    document.getElementById('next').style.display = 'none';
  }
});
</script>

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