我应该在哪里存储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");