Question

我想创建动态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>

Answer 1

使用属性在对象上存储数据并不是一个明智的想法，就像你自己发现的那样，它并不像你想要的那样工作。特别是json。

在你的情况下，你正试图存储json？或者在html中有一个带有qoutes的对象，但是浏览器会将它遇到的第一个qoute视为rel属性的闭包。弄乱大量的东西。

将不同的属性存储在单独的数据属性中，或者将项目存储在js变量中，并将锚点存储为id。当您再次需要数据时，使用锚点上的id从js变量中重新获取数据。（read more here on data attributes）。

Answer 2

html += "<a href='javascript:void(0);' rel=\""+rela+"\" ><img src='x"+i+".jpg' /></a>";

或

var rela='{gallery:"gal", smallimage:"a", largeimage: "b"}';

jQuery中的Rel属性

2 个答案: