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

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 后简单地包含 class 或数据属性之类的内容，然后在添加另一个事件之前检查它是否存在？

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
};

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

OnClick event that adds text to a div, removes it if it exists, and groups by description name

html

javascript

jquery

fullcalendar