append() 中的 JavaScript 单引号和双引号 - fullcalendar external-events

Posted 2023-03-24

【中文标题】append() 中的 JavaScript 单引号和双引号 - fullcalendar external-events

【英文标题】：JavaScript single quotes and double quotes in append() - fullcalendar external-events

【发布时间】：2017-02-25 09:39:43

【问题描述】：

我正在创建一个下拉菜单，它会生成几个外部事件（取决于您的选择），这些事件可以放在全日历上。我需要在 ajax 的成功部分将几个事件 div 附加到另一个 div。

问题是我无法在必须放在 append 函数中的字符串中正确写入单引号和双引号。

追加后的div应该是这样渲染的：

 <div class='fc-event' data-event='"id": 1, "title": "This is event 1"'>My Event 1</div>

下面是监听下拉列表变化并生成外部事件的功能：

$("#category").change(function () 

    $('#listAct').html("");

    $.ajax(
        type: "POST",
        url: 'SearchActivities.php',
        data:  CategoryName: $("#category").find("option:selected").val() ,

        success: function (data) 
            var result = $.parseJSON(data);
            var arraysize = result.length;
            var i, ActTitle;

            for (i = 0; i < arraysize; i++) 

                ActTitle = result[i]['ActTitle'];

                var eventdetails = '"id":1,"title":"This is event 1"';

                $('#listAct').append('<div class="fc-event" data-event=' + eventdetails + '>' + ActTitle + '</div>');

            
            /* initialize the external events
             -----------------------------------------------------------------*/
            $('#listAct').find('.fc-event').each(function () 
                // make the event draggable using jQuery UI
                $(this).draggable(
                    zIndex: 999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                );
            );
        
    );
);

我尝试将所有必要的值放在一个 varialbe (eventdetails) 中，然后在附加内容中使用它，但如果您想将数据事件内容直接放在附加函数中，没有问题。

下拉列表：

<form>
    <label style="color: black" for="category">Select Category</label>
    <select id="category" name="category">
        <option value=""></option>
        <option value="Attractions, Nature Park">Attractions, Nature Park</option>
        <option value="Underwater Activities">Underwater Activities</option>
        <option value="Museums and Sites">Museums and Sites</option>
    </select>
</form>

    <div id="listAct">
        <div class='fc-event' data-event='"id": 1, "randomProperty": "foobar", "title": "This is event 1"'>My Event 1</div>
    </div>

【参考方案1】：

改变这一行

$('#listAct').append('<div class="fc-event" data-event=' + eventdetails + '>' + ActTitle + '</div>');

到

$('#listAct').append('<div class="fc-event" data-event=\'' + eventdetails + '\'>' + ActTitle + '</div>');

使用\' 将导致单引号被附加到字符串中，你会得到你想要的：

<div class='fc-event' data-event='"id": 1, "title": "This is event 1"'>My Event 1</div>

而不是

<div class='fc-event' data-event="id": 1, "title": "This is event 1">My Event 1</div>

编辑：要在 eventdetails 变量中使用名为 title 的变量，请使用

var eventdetails = '"id":1,"' + title + '":"This is event 1"';

【讨论】：

嗨，又是我，我需要为“title”值使用一个变量。它应该是这样的： "title" : variable 其中 variable 是一个字符串，应该用双引号括起来。请问我该怎么做？

再次感谢您的帮助！