我應該在哪裏存儲html元素的jQuery數據？

Question

爲了更好地學習jQuery，我決定編寫一個插件，創建一個像google +的gallery collage effect。這是一個example。

我想在調整包含圖像的html元素的大小時再次觸發它。我遇到的部分問題是我需要存儲原始圖像大小以便重新計算圖像大小以使其適合。

我不知道在哪裏存儲以及如何檢索這些原始圖像大小。完整的插件與以上鍊接，但我會在這裏提供一個總結。

;(function($) { 
    $.fn.collagePlus = function(options) { 

     var settings = $.extend( 
      //... 
      'images'   : $('img', $(this)) 
      //... 
     ); 

     return this.each(function() { 
      settings.images.each(function(index){ 
       //... 

       /* 
       * get the current image size 
       */ 
       var w = (typeof $(this).data().width != 'undefined') ? $(this).data().width : $(this).width(); 
       var h = (typeof $(this).data().height != 'undefined') ? $(this).data().height : $(this).height(); 

       /* 
       * store the original size for resize events 
       */ 
       $(this).attr("data-width" , w ); 
       $(this).attr("data-height" , h ); 
       //... Do some other stuff 
       } 
      ); 
     }); 
    } 
})(jQuery); 

Answer 1

您正在使用.data()錯誤。當您將一個參數傳遞給.data函數時，它將返回給定鍵的值。當您傳遞2個參數時，.data將設置該鍵的值。

塊：

//get the current image size 
var w = (typeof $(this).data().width != 'undefined') ? $(this).data().width : $(this).width(); 
var h = (typeof $(this).data().height != 'undefined') ? $(this).data().height : $(this).height(); 

應該是：

var $this = $(this); //caching your selector 
if (!$this.data('width')) //if this element doesn't have a width stored 
    $this.data('width', $this.width()); //stores currently computed width 
if (!$this.data('height')) //repeat 
    $this.data('height', $this.height()); 

當然，後來檢索數據：

alert($this.data('width')) //alerts currently stored width 

Fiddle Demo

您還可以存儲在.data對象傳遞地圖屬性的：

if (!$(this).data('size')) 
    $(this).data('size', { width: $(this).width(), height: $(this).height() }); 

現在width和height是存儲在.data('size')對象，其可以與檢索的屬性：

alert($(this).data('size').width); 

Fiddle

對於爲了簡單起見，我主要採用第一種選擇。然而第二個看起來更整潔。選擇你發現更具可讀性和可維護性的任何一個。

Answer 2

在服務器端，你可以存儲HTML元素的數據data-* attributes並通過jQuery的.data()功能得到它（因爲jQuery 1.4.3，這也改變了函數的一般行爲作爲文檔說明）。你在你的插件設置屬性，但在這一點上，你可以存儲在data對象這樣的原始寬度和高度：

$(this).data("data-width", w); 
$(this).data("data-height", h); 

使用.data()函數返回的數據不管它被存儲爲您的HTML中的data-屬性，還是包含在jQuery的data對象中。您已經在使用.data()函數而沒有任何參數，其中returns the complete data object of the matched elements也與來自HTML屬性的數據和來自jQuery的data對象。這工作，但你可以只讓調用它像這樣保存的width和height：你們不使用。數據（）的錯誤的方式

$(this).data("width"); 
$(this).data("height");