问题根源在于 html 中动态生成了多个同名按钮（.nextbtn），但 javascript 仅对第一个按钮绑定事件监听器；后续显示的按钮未绑定事件，导致点击失效。解决方案是将按钮移出循环、全局唯一，并确保事件监听器持久生效。
问题根源在于 html 中动态生成了多个同名按钮（.nextbtn），但 javascript 仅对第一个按钮绑定事件监听器；后续显示的按钮未绑定事件，导致点击失效。解决方案是将按钮移出循环、全局唯一，并确保事件监听器持久生效。
在您当前的模板代码中，{% for movie in movies %} 循环为每部电影生成一个 .shading-div，同时也为每个 div 内部重复创建了一个 。这意味着 DOM 中实际存在多达 20 个（或更多）具有相同类名 .nextbtn 的按钮。
而您的 JavaScript 使用的是：
nextbtn = document.querySelector('.nextbtn');
document.querySelector() 仅返回文档中第一个匹配的元素 —— 即循环生成的第一个按钮。随后您只为这一个按钮添加了 click 监听器。当首次点击时，该按钮所在的父容器（.shading-div:nth-child(1)）被隐藏，同时第二个容器（含另一个 .nextbtn）被显示出来。但这个新显示的按钮从未被绑定过事件监听器，因此后续点击完全无响应，控制台也无日志输出。
✅ 正确做法：确保页面中只有一个 .nextbtn，且它始终存在于 DOM 中、不随内容切换而销毁或重建。
✅ 推荐 HTML 结构（按钮脱离循环）
<div class="movies-container">
{% for movie in movies %}
<div class="shading-div" id="trdm-{{ movie.id }}">
<!-- 其他电影内容 -->
</div>
{% endfor %}
</div>
<!-- 全局唯一导航按钮，置于容器外 -->
<div class="navigation-controls">
<button class="nextbtn"><i class="fas fa-arrow-right"></i></button>
</div>
✅ 优化后的 JavaScript（含变量声明与健壮性增强）
document.addEventListener('DOMContentLoaded', function () {
// ✅ 使用 let/const 显式声明作用域变量（避免隐式全局）
let trdmDisplayed = 1;
const nextbtn = document.querySelector('.nextbtn');
const shadingDivs = document.querySelectorAll('.movies-container .shading-div');
// ✅ 添加防错检查：确保至少存在一个可切换的元素
if (!nextbtn || shadingDivs.length === 0) {
console.warn('Missing .nextbtn or no .shading-div found.');
return;
}
nextbtn.addEventListener('click', function () {
console.log(`Current index before switch: ${trdmDisplayed}`);
// 隐藏当前显示项（注意：索引从 1 开始，querySelector nth-child 也基于 1）
const current = shadingDivs[trdmDisplayed - 1];
if (current) current.style.display = 'none';
// 计算下一个索引（循环：1→2→…→20→1）
trdmDisplayed = (trdmDisplayed % shadingDivs.length) + 1;
// 显示下一个项
const next = shadingDivs[trdmDisplayed - 1];
if (next) next.style.display = 'block';
});
});
⚠️ 关键注意事项
-
不要用
display: none/block控制大量元素的可见性（尤其在动画或 SEO 场景下）。更推荐使用 CSS 类切换（如.hidden { display: none; }）或visibility: hidden/opacity配合过渡效果。 - 若需支持「上一页」，建议统一管理状态并封装为
showSlide(index)函数，提升可维护性。 - 始终校验
querySelector/querySelectorAll返回结果是否为空，避免运行时错误。 - 如未来需支持动态增删影片，应改用事件委托（
event delegation），例如监听.movies-container上的click并判断e.target.matches('.nextbtn')—— 但本例中因按钮已唯一，无需委托。
通过将按钮结构化为静态、全局唯一组件，并正确绑定一次监听器，即可彻底解决“仅首次点击生效”的问题。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
