JavaScript append() 中的单引号和双引号 - fullcalendar 外部事件

Question

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

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

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>

Answer 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"}';

JavaScript append() 中的单引号和双引号 - fullcalendar 外部事件

JavaScript single quotes and double quotes in append() - fullcalendar external-events

javascript

string

fullcalendar

double-quotes

single-quotes