Question

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

$.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;
};

html如下：

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

我想要做的是编写rel=""标签，而不是“thumby”。

我希望rel标签看起来像这样：

rel="gfx/boss_black.jpg"

当我这样做时，JS不再起作用了。如何更改JS以简单地获取“rel”？

Answer 1

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

img.attr('src', thumby);

我建议将替代src属性存储在rel以外的属性中。 HTML5 data attribute将是一个很好的候选人。

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

Answer 2

如果我理解正确 - 有一个名为thumby的库需要您的rel标签的特殊格式，而您的源文件中不需要这种格式。

我可以看到两种可能的灵魂。

尝试在包含thumby库之前执行更改rel标记的javascript。 Javascript按HTML文档中指定的顺序加载和执行。希望thumby会获取更改后的值，但源html包含旧值。
修改thumby库 - 特别是从rel读取的部分，并可能使其根据类拇指识别操作位置。

Answer 3

类似的东西：

<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});
  }
);

jquery获取rel属性并更改它

3 个答案: