jQuery中的Rel属性

Rel attribute in jQuery

本文关键字：属性 Rel 中的 jQuery      更新时间：2023-09-26

我想创建动态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中包含qoute的对象，浏览器会将遇到的第一个qoute视为rel属性的闭包。。把事情搞砸了。

将不同的属性存储在一个单独的数据属性中，或者将项存储在js变量中，并将锚点存储为id。当您再次需要数据时，您可以使用锚点上的id从js变量重新获取数据。(点击此处了解更多关于数据属性的信息(。

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

或

var rela='{gallery:"gal", smallimage:"a", largeimage: "b"}';
相关文章：