Javascript 我应该在哪里存储html元素的jQuery数据？

为了更好地学习jquery，我决定编写一个插件，创建一个类似google+的应用程序。这是一个例子

我想在调整包含图像的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 );

你用错了。将1个参数传递给

.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

您还可以将对象存储在

.data

中，并传递属性映射：

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

现在，

width

和

height

是存储在

.data（'size'）

中的对象属性，可以通过以下方式检索：

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

---

为了简单起见，我主要选择第一个选项。然而，第二个看起来更整洁。在服务器端，您可以将HTML元素的数据存储在中，并通过jQuery函数获取数据（因为，这也改变了该函数的一般行为，如文档中所述）。您正在插件中设置属性，但此时，您可以将原始宽度和高度存储在

数据
对象中，如下所示：

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

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

使用
.data（）
函数返回数据，无论数据是作为
数据-
属性存储在HTML中，还是包含在附加到元素的jQuery的
数据
对象中。您已经在使用没有任何参数的
.data（）
函数，该函数还包含来自HTML属性和jQuery的
数据
对象的数据。这是可行的，但您可以通过如下调用来获取已保存的
宽度
和
高度
：

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

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

不确定，但您不是用错了.data（）吗？我总是像这样设置数据：
$（this）.data（“height”，h）
并像这样检索它：
$（this）.data（“height”）
我很确定，在设置了高度数据属性之后，下次您检索它时，它将不会被取消定义。@Lumocra这似乎是问题所在，是的，Hanks，它起作用了<代码>变量$this=$（this）为什么要缓存选择器？这是我应该做的吗？是的。通常，如果多次使用$（this），则应将其缓存在变量中。前缀“$”有助于将变量的值识别为jQuery包装的对象。@ed209这是一个微观优化，我正在寻找Jared的
$（This）与$This
问题，这是一个很好的参考+1@Wolfram，同样，通过这种方式，您不会每次引用
$this
时都创建一个新的jQuery对象。重新使用选择器可以提高性能。@ed209此处。这个问题启发我使用选择器缓存<代码>：）
感谢编辑@Wolfram，当我超过睡眠时间数小时时，直接在答案框中编写代码往往会产生一些愚蠢的错误。现在也把小提琴修好了
=]
是的，我没有提到
.data（）
也检索标记中设置的初始值，这值+1。只需注意，OP使用
.width（）
客户端存储计算的宽度，如果存在可能影响它的CSS规则（即%dimensions、可变父维度等），则它可能与实际图像大小不同，这更难解释服务器端，否则可能会产生不期望的效果。