我在一个页面上呈现了多个日历，我需要使用下一个预设按钮（以及日期选择）来查看不同的日期范围。我已经连接了外部的 "下一个 "按钮，但是，它们只对页面上的最后一个日历有效。
我的JS来制作日历元素。
document.addEventListener('DOMContentLoaded', function() {
for (let index = 1; index <= array_length; index++) {
calendar_str = 'calendar_' + String(index);
eval('var ' + calendar_str + ' = document.getElementById(\'' + calendar_str + '\');');
var calendar = new FullCalendar.Calendar(eval('calendar_' + String(index)), {
... code here to setup calendar ...
});
calendar.render();
calendar.setOption('contentHeight', 200);
document.getElementById('prev-btn-ext').addEventListener('click', function() {
calendar.prev(); // call method
});
document.getElementById('next-btn-ext').addEventListener('click', function() {
calendar.next(); // call method
});
}
});
我的问题是，当页面渲染时，我可以看到所有的日历，我可以在它们之间拖放事件，但是，当我点击下一个和上一个按钮时，只有最后一个日历会改变。我需要所有的日历都基于下一个和前一个按钮同步改变。
如你所见，我的日历实例被命名为 "calendar_1"、"calendar_2 "等，但下一个和上一个按钮的EventListener只关注 "calendar "变量。我想知道我的问题是否与此有关，也许我需要为每个日历实例指定一个参数 calendar.next()或 calendar.prev()？
这是一个范围问题。
var calendar = 重新定义了 calendar 变量，每次你的循环运行时。既然你已经用 var的范围是全局的，它的范围是整个函数体，并扩展到函数中所有分配给点击事件的回调内部。这意味着即使是在循环的前几次迭代中定义的回调也将使用最新的定义的 calendar 当它们执行时。
而如果你写 let calendar = 而不是，这将把变量的范围限制在紧邻的封闭块（本例中的循环），并意味着回调在运行时使用循环的迭代中定义的版本，而你的代码将按照预期工作。这也是为什么 let 被添加到JavaScript中。
演示。https:/codepen.ioADyson82penOJMbjQz。
这是一篇有用的参考文章。使用 "let "和 "var "有什么区别？
但总体来说，与其使用 eval (这可能是一个安全问题，以及创建难以阅读的代码)来生成唯一的变量名，将所有的日历引用存储在一个数组中会干净很多。所以这里有一个替代方法。
document.addEventListener("DOMContentLoaded", function () {
let calendars = []; //calendars array
//auto-detect the number of calendars on the page
var calendarElements = document.querySelectorAll(".cal");
calendarElements.forEach(function (cal) {
let calendar = new FullCalendar.Calendar(cal, { plugins: ["dayGrid"] });
calendar.render();
calendar.setOption("contentHeight", 200);
calendars.push(calendar); //add to array of calendars
});
document
.getElementById("prev-btn-ext")
.addEventListener("click", function () {
calendars.forEach(function (cal) {
cal.prev();
});
});
document
.getElementById("next-btn-ext")
.addEventListener("click", function () {
calendars.forEach(function (cal) {
cal.next();
});
});
});
只需要对HTML做一些小的改动，将 "cal "类添加到日历元素中，例如...。
<button type="button" id="prev-btn-ext">Prev</button>
<button type="button" id="next-btn-ext">Next</button>
<div id='calendar_1' class="cal"></div>
<div id='calendar_2' class="cal"></div>
<div id='calendar_3' class="cal"></div>
例如："Demo: https:/codepen.ioADyson82penzYrodyG。