jQuery中的Rel属性

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"}';