Атрибут Rel в jQuery

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? Или объект с qoutes в html, браузер, тем не менее, будет воспринимать первый qoute, с которым он сталкивается, как закрытие атрибута rel.

Сохраните различные свойства в отдельном атрибуте данных или в conidder, хранящем элементы в переменной js и привязке идентификатора. Когда вам снова понадобятся данные, вы используете идентификатор на привязке, чтобы восстановить данные из переменной js. ( подробнее об атрибутах данных ).

Answer 2

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

или

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