[英]JavaScript single quotes and double quotes in append() - fullcalendar external-events
我正在创建一个下拉菜单,该菜单会生成多个外部事件(取决于您的选择),这些事件可以放在完整日历上。 我需要在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(事件详细信息)中,然后在附加内容中使用它,但是如果您想将数据事件内容直接放置在附加函数中,就没有问题。
下拉列表:
<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>
更改此行
$('#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"}';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.