Javascript jquery获取rel属性并更改它

嘿，伙计们，我有以下代码。它基本上是一个图库脚本，当我将鼠标移到缩略图上时，它将更改缩略图的更大版本：

$.fn.CloudZoom = function (options) {
    try {
        document.execCommand("BackgroundImageCache", false, true);
    } catch (e) {}
    this.each(function () {
        var relOpts, opts;
        eval('var   a = {' + $(this).attr('rel') + '}');
        relOpts = a;
        if ($(this).is('.image')) {
            $(this).css({
                'position': 'relative',
                'display': 'block'
            });
            $('img', $(this)).css({
                'display': 'block'
            });
            if ($(this).parent().attr('id') != 'imageBox') {
                $(this).wrap('<div id="imageBox"></div>');
            }
            opts = $.extend({}, $.fn.CloudZoom.defaults, options);
            opts = $.extend({}, opts, relOpts);
            $(this).data('zoom', new CloudZoom($(this), opts));

        } else if ($(this).is('.thumbs')) {
            opts = $.extend({}, relOpts, options);
            $(this).data('relOpts', opts);
            $(this).bind('mouseenter click', $(this), function (event) {

                var data = event.data.data('relOpts');
                $('#' + 'mainImage').data('zoom').destroy();
                $('#' + 'mainImage').attr('href', event.data.attr('href'));
                // Change the small image to point to the new small image.
                $('#' + 'mainImage' + ' img').attr('src', data.thumby);
                $('#' + 'mainImage').CloudZoom();
                return false;
            });
        }
    });
    return this;
};

当我这样做的时候，JS不再工作了。如何更改JS以获得“rel”

我建议将替代的

src

属性存储在

rel

之外的属性中。A将是一个很好的候选人

---

另外，这是一个奇怪的选择器：）

如果我理解正确的话-有一个名为thumby的库，它需要一个特殊格式的rel标记，而您不希望它出现在源代码中

我可以看到两种可能的解决方案

在包含thumby库之前，尝试执行更改rel标记的javascript。Javascript按照HTML文档中指定的顺序加载和执行。希望thumby将拾取更改的值，但源html包含旧值

修改thumby库-特别是从rel读取的部件，并可能使其基于类thumbs识别操作的位置

比如：

<li>
 <a href="gfx/boss_black.jpg" class="thumbs">
  <img src="gfx/boss-black-small.jpg" rel="gfx/boss_black.jpg">
 </a>
</li>

---

也给我们看看JS，没有它我们就不知道了。请不要将rel属性用作“我可以在其中存储任意数据的属性”，因为它有明确的用途！您可能希望使用data-*属性而不是rel，rel用于关系、xfn等。好的，我编辑了这篇文章以包含jsno，没有称为thumby的库。。。在最初的gallery脚本中，thumby被称为“smallImage”，但我将其更改为thumby，因为我不想太过混乱rel“”标记

rel="gfx/boss_black.jpg"

var img = $('#' + 'mainImage' + ' img'),
    rel = img.parent().attr('rel'),
    thumby = rel.substr(8, rel.length - 9);

img.attr('src', thumby);

<li>
 <a href="gfx/boss_black.jpg" class="thumbs">
  <img src="gfx/boss-black-small.jpg" rel="gfx/boss_black.jpg">
 </a>
</li>

$('.thumbs img').hover(
  function () {
    var r = $(this).attr('rel'), a = $(this).attr('src');
    $(this).attr({'rel':a,'src':r});
  }, 
  function () {
    var r = $(this).attr('rel'), a = $(this).attr('src');
    $(this).attr({'rel':a,'src':r});
  }
);