我想创建动态HTML,需要将其呈现为以下代码:

<a rel="{gallery: 'gal', smallimage: 'a',largeimage: 'b'}" href="javascript:void(0);"><img src="x1.jpg"></a>


我在jQuery中编写了以下代码以实现上述目标:

for(i=1; i<=4; i++){
    var rela="{gallery:'gal', smallimage:'a', largeimage: 'b'}";
    html += "<a href='javascript:void(0);' rel='"+rela+"' ><img src='x"+i+".jpg' /></a>";
}


但是执行后,其呈现如下:

<a 'b'}'="" largeimage:="" smallimage:'a',="" gal',="" rel="{gallery:" href="javascript:void(0);"><img src="x1" class="img1"></a>

最佳答案

正如您所发现的那样,使用属性将数据存储在对象上并不是一个聪明的主意,它也不起作用,因为您可能希望它起作用。特别是json。

在您的情况下,您正在尝试存储json?或在html中包含qoutes的对象,浏览器将把遇到的第一个qoute视为rel属性的关闭。

将不同的属性存储在单独的data属性中,或者将这些项目存储在js变量中,并将锚点存储在id中。当您再次需要数据时,可以使用锚点上的id从js变量中重新捕获数据。 (read more here on data attributes)。

10-05 20:58
查看更多