Question

我正在使用FullCalendar，其中充满了从mysql数据库填充的事件。我正在使用FullCalendar的eventClick函数将事件的内容发送到一个单独的div，以便能够打印出我单击的事件。

使用下面的代码，我可以单击该事件并将其添加到div中，但它会添加重复项，因为没有什么可以阻止这样做了，因为我只需要追加每个单击一个事件。

// FullCalendar eventClick function
eventClick:function(event){
    $(document).ready(function(){
        document.getElementById("event_info").innerHTML += event.description + "<br>" + event.start + "<br>" + event.end;
    });
}

// div where the information will print
<div class="col-sm-3" id="event_info"></div>

因此，我希望能够单击日历事件并将其发送到div，但还要检查是否已添加该事件，如果已删除，则将其删除。最后，我希望在单击时按描述名称对事件进行分组。

我不确定从哪里开始添加这些内容，因此将不胜感激任何帮助或指导。感谢您抽出宝贵的时间，如果我对某些内容的解释不正确，请随时对我大喊。

Answer 1

您需要在添加新文本之前检查div innerHtml。请尝试以下代码：

// FullCalendar eventClick function
eventClick:function(event){
    $(document).ready(function(){
        if($("div#event_info:contains("+event.description+")").length <=0)
        {
            document.getElementById("event_info").innerHTML += event.description + "<br>" + event.start + "<br>" + event.end";
        }
    });
}

Answer 2

为什么不先将事件添加到div，然后在添加另一个事件之前先检查是否存在类或数据属性，然后再添加其他事件？

var target = document.getElementById("event_info");
var isAlreadySet = target.getAttribute('data-eventAlreadySet');
var newHTML = event.description + "<br>" + event.start + "<br>" + event.end";

if (!isAlreadySet) {
    target.innerHTML += newHTML;
    target.setAttribute('data-eventAlreadySet', "true");
} else {
    // your code here if the event is already set

    // to replace the former event, use something like : 
    target.innerHTML = newHTML; // replaces the HTML
    //instead of :
    target.innerHTML += newHTML; // adds to the existing HTML
};

OnClick事件可将文本添加到div，如果存在则将其删除，并按描述名称进行分组

2 个答案: