我有一个获取参数的函数
callId
我在此处检查并在第一个日志中得到结果“用 ID 初始化日历:1”
但是对于第二个日志,我无法获取ID“选择日历ID:”
如何在clouser选择中发送ID?
function updateCalendar(events, callId) {
console.log('Initializing calendar with ID:', callId);
const csrftoken = document.getElementById('csrf-token').value;
var calendarEl = document.getElementById('calendar');
var eventsData = JSON.parse(document.getElementById('events-data').textContent);
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: eventsData,
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
select: function(start, end, allDay) {
console.log('Select calendar ID:', callId);
}
})
}
我想得到这样的结果
Initializing calendar with ID: 1
Select calendar ID: 1
问题在于
select
回调函数内的
callId
变量引用的是外部函数
updateCalendar
的参数
callId
。当
select
回调函数在未来某个时间点被调用时,
updateCalendar
函数早已执行完毕,
callId
的值也就不再可访问。
解决方法是利用 JavaScript 的闭包特性。将
select
回调函数定义为一个独立的函数,并将
callId
作为参数传递给它。这样,
select
回调函数就可以访问到正确的
callId
值。
以下是修改后的代码:
function updateCalendar(events, callId) {
console.log('Initializing calendar with ID:', callId);
const csrftoken = document.getElementById('csrf-token').value;
var calendarEl = document.getElementById('calendar');
var eventsData = JSON.parse(document.getElementById('events-data').textContent);
// 定义一个独立的函数来处理选择事件
function handleSelect(start, end, allDay) {
console.log('Select calendar ID:', callId);
}
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: eventsData,
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
// 将 handleSelect 函数作为 select 回调函数
select: handleSelect
});
}
在这个修改后的代码中,我们定义了一个名为
handleSelect
的函数来处理选择事件。
handleSelect
函数接收
start
、
end
和
allDay
参数,这些参数由
fullCalendar
插件提供。
在
updateCalendar
函数中,我们将
handleSelect
函数作为
select
回调函数传递给
fullCalendar
插件。由于
handleSelect
函数是在
updateCalendar
函数内部定义的,因此它可以访问到
callId
变量。
这样,当用户选择日历上的日期时,
handleSelect
函数就会被调用,并且它可以访问到正确的
callId
值,从而在控制台中打印出 "Select calendar ID: 1"。