全日历外部事件丢弃两种不同的模式

Question

我有点通过反复试验自学，很多错误:) 我被卡住了。 我正在使用全日历，它在 JSON 提要中工作得很好。

我想将外部事件拖到日历中，并根据拖动的事件显示不同的模式。 事件下降和模态显示正在工作，除了它每次都开放(维修之上的假期)。

<div id="external-events">
<div id="vacationdrop" class="fc-event vacation" className="vacation">Vacation</div>
<div id="repairdrop" class="fc-event repair" className="repair">Repair</div
</div>

事件下降：

drop: function() {
if (jQuery('#external-events .fc-event').hasClass('repair') {
var territory = jQuery(terrDropdown).find(':selected').text();
var start = moment(start).format("YYYY-MM-DD");
var end = moment(end).format("YYYY-MM-DD");
jQuery('#calendarRepairModal #startdate').val(start);
jQuery('#calendarRepairModal #enddate').val(end);
jQuery('#calendarRepairModal #terr').val(territory);
jQuery("#calendarRepairModal").modal("show");
}
};
else {
if (jQuery('#external-events .fc-event').hasClass('vacation') {
var territory = jQuery(terrDropdown).find(':selected').text();
var start = moment(start).format("YYYY-MM-DD");
var end = moment(end).format("YYYY-MM-DD");
jQuery('#calendarVacationModal #startdate').val(start);
jQuery('#calendarVacationModal #enddate').val(end);
jQuery('#calendarVacationModal #terr').val(territory);
jQuery("#calendarVacationModal").modal("show");
};)
},

任何帮助将不胜感激。我确实进行了相当广泛的搜索，但没有类似于我的目标。另外，我每次都写出jQuery，因为我也在使用wordpress，而且它很挑剔。

Answer 1

很难确切地确定为什么会得到所描述的行为，因为示例中的代码无法编译，但是很明显

jQuery('#external-events .fc-event')

将返回所有外部事件，因为它选择具有fc-event类的外部事件框中的所有内容 - 即所有事件。然后，执行

.hasClass("repair")

在该事件列表中意味着如果这些事件中的任何一个也具有类"修复"，则返回 true。因此，由于这是您的第一个if语句，因此如果您的外部事件列表中至少有一个"修复"事件，它将始终显示修复模式。

我认为您要做的是确定拖放的特定事件。为此，您可以使用this对象。如文档 (https://fullcalendar.io/docs/dropping/drop/) 中所述，在"drop"回调的上下文中，this表示为了触发回调而删除的单个元素。

例如

drop: function(date, jsEvent, ui) {
if ($(this).hasClass('repair')) {

后来...

if ($(this).hasClass('vacation')) {

在此处查看(略微简化的)演示 http://jsfiddle.net/sbxpv25p/97/其中显示了this的使用。(我不得不猜测/只是放入基本的东西)与你的一些代码，只是为了让它工作，但你可以忽略这些位，并专注于"drop"回调)。