Question

我正在尝试在浏览器宽度减小时调整一系列图像的大小。以下代码工作正常，但当然随着浏览器的增加，传递的img无法调整大小裁剪为更大的大小。

$('#image img').each(function() {
      $($(this)).resizecrop({
      width:width,
      height:height,
      vertical:"top"
    });  
});

使用此代码，我试图通过原始图像，调整大小裁剪，然后将其交换为较小的图像。我收到错误，将新图像分配给$（this）（无效的左侧和侧面分配）。

为什么这样，我做错了什么？谢谢，

$('#image img').each(function() {
var img_path =  $($(this))[0].src;
var img = $('<img />').attr({ 'src': img_path }); 
$(this) = img;

      $($(this)).resizecrop({
      width:width,
      height:height,
      vertical:"top"
    });  
});

Answer 1

让我们澄清你似乎有的一些误解。

$($(this))与$(this)
$(this)[0]当this是DOM元素时与this相同
您无法为jquery对象分配值以替换引用的DOM元素，因此$(this) = img不起作用（它会引发您提及的错误）

现在，你使用的插件（http://code.google.com/p/resize-crop/）将目标元素包装在另一个中，以便做到这一点。

您必须打开元素并清除其样式才能重新应用插件。此外，该插件还可以使用一组元素，不仅适用于单个元素，因此您无需使用.each()为每个图像运行插件。

$('#image img').unwrap().removeAttr('style').resizecrop({
        width:width,
        height:height,
        vertical:"top"
    });

Answer 2

您无需在任何地方重新分配img。它已经是一个JQuery对象，所以只需使用它：

$('#image img').each(function() {
var img_path =  $($(this))[0].src;
var img = $('<img />').attr({ 'src': img_path }); 
img.resizecrop({
      width:width,
      height:height,
      vertical:"top"
    });  
});

左侧使用$ this进行无效分配

2 个答案: