jquery獲取rel屬性並更改它

嘿傢伙，我有以下代碼。它基本上是一個畫廊腳本，當我鼠標移到縮略圖，它會改變縮略圖的一個更大的版本：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; 
};

的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>

我想要做什麼是在沒有「thumby」的情況下編寫rel=""標籤。

我想要的相對標籤是這樣的：

rel="gfx/boss_black.jpg"

當我做到這一點，JS不工作了。如何將JS更改爲簡單地獲取「rel」？

來源

2011-04-21 Dominik

向我們展示了JS爲好，沒有它我們也沒辦法。 – Lazarus 2011-04-21 10:36:28

Argh。請不要使用rel屬性作爲「屬性我可以存儲任意數據」，它有一個明確的目的！ – Quentin 2011-04-21 10:39:29

你可能想使用data- *屬性而不是rel，rel是關係，xfn等。 – kovshenin 2011-04-21 10:41:52

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

img.attr('src', thumby);

我會建議在存儲比rel其他屬性替代src屬性雖然。 A HTML5 data attribute將是一個很好的候選人。

而且，這是一個奇怪的選擇:)

來源

2011-04-21 10:40:10

如果我理解正確的話 - 有一個叫做庫thumby需要爲您不希望您的源的相對標籤的特殊格式。

我可以看到兩種可能的表現。

嘗試在包含thumby庫之前執行更改rel標籤的javascript。 Javascript加載並按照HTML文檔中指定的順序執行。希望thumby可以獲取更改的值，但源html包含舊值。
修改thumby庫 - 特別是從rel讀取的部分，也許可以根據class thumbs識別哪裏操作。

來源

2011-04-21 10:41:54

不，沒有庫稱爲thumby ... thumby被稱爲「 smallImage「，但我將它改爲thumby，因爲我不想將rel標籤過多地混淆 – Dominik 2011-04-21 12:06:05

喜歡的東西：

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

來源

2011-04-21 10:44:12 herostwist

jquery獲取rel屬性並更改它

回答

相關問題