jquery将 'rel'内的值变成变量

Question

我目前正在处理this jquery 插件(图像放大器)。

我发现许多 html 都会对我想要放大的每个图像使用“a rel”或关系。

这是相关示例:

<a rel="{gallery: 'gal1', smallimage: 'images/image1.jpg',largeimage: 'images/image1.jpg'}">
    <img src = images/image1.jpg>
</a>

所以，我想将“smallimage”和“largeimage”(在rel内)的值更改为变量。

我不确定jquery是否可以处理， 我尝试编写一些像这样的jquery:

$(function(){
  var src= $("a:first").find('rel').attr();
});

但我认为它将把“rel”内的所有内容存储到变量 src 中

非常感谢

Answer 1

首先，您应该获取 rel 属性，如下所示:

$(element).attr('rel');

其次，您可以将此字符串解析为 JSON 对象，但首先您必须确保 rel 中的内容是 格式良好的 JSON 对象。因此，使用单引号来包裹 rel 并使用双引号来包裹元素，如下所示:

<a rel='{"gallery": "gal1", "smallimage": "images/image1.jpg","largeimage": "images/image1.jpg"}'>

然后您可以使用 jQuery 解析 JSON 并将其用作对象，如下所示:

var src= $("a").attr("rel");
src = $.parseJSON(src);

您可以看到一个工作演示，其中我使用 src 作为对象:

Demo

您说您需要使用rel，但是更好的替代方案，正如评论中所建议的那样，您可以使用data 属性来存储此类数据，因为这是它们的工作，而不是 rel 的工作。 HTML 元素看起来像这样:

<a data-gallery="gal1" data-smallimage="images/small.jpg" data-largeimage="images/large.jpg" href="#">

编辑:如何更改 rel 对象

您询问如何使用另一个图像标记的 src 属性更改 src 对象的属性之一。然后你会这样做:

// Get the attribute you want to substitute
var image = $('img').attr('src');

// Substitute it into the object properties
src.smallimage = image;
src.largeimage = image;

// Turn the object back into a string to put it back into the rel attribute
src = JSON.stringify(src);
$('a').attr('rel', src);