Question

我正在创建一个下拉菜单，它会生成几个可以放在fullcalendar上的外部事件（取决于您的选择）。我需要在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>

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>

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

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

append（）中的JavaScript单引号和双引号 - fullcalendar外部事件

1 个答案: