javascript 中出现missing ) after argument list的错误

今天在写html页面中使用JavaScript拼凑DOM元素时，出现“missing ) after argument list ”的错误，试了很长时间才解决，记录以便以后查看

<ul class="dropdown-menu" id="menus">
<script type="text/javascript">
$(function () {
$.post('/ImageManager/GetAllImageData?plugin=LS.SGYC.Management', { page: 1, rows: 100 }, function (data) {
$.each(data, function (index, value) {
$('#menus').append("<li><a href='javascript:void(0)' onclick='showCompareImage(" + value.ImageUrl + ")'>" + value.ImageName + "</a></li>");
})
}, 'json')
})
</script>
</ul>

错误出在下面这句代码

$('#menus').append("<li><a href='javascript:void(0)' onclick='showCompareImage(" + value.ImageUrl + ")'>" + value.ImageName + "</a></li>");

主要是双引号和单引号的嵌套使用

测试一、测试解决方案时，试着在value.ImageUrl处添加单引号（如下）

$('#menus').append("<li><a href='javascript:void(0)' onclick='showCompareImage('" + value.ImageUrl + "')'>" + value.ImageName + "</a></li>");

结果出现“unexpected }”的错误

测试二、将最外面的双引号和内部的单引号，全部互换，如下

$('#menus').append('<li><a href="javascript:void(0)" onclick="showCompareImage("' + value.ImageUrl + ')">' + value.ImageName + '</a></li>');

发现错误任然存在。

查找解决方案后，使用转义符将双引号进行转义，解决问题，最终代码如下：

$('#menus').append("<li><a href='javascript:void(0)' onclick='showCompareImage(\"" + value.ImageUrl + "\")'>" + value.ImageName + "</a></li>");

GOOD LUCK！！！