0

随着浏览器宽度的减小，我正在尝试调整一系列图像的大小。下面的代码工作正常，但是当然随着浏览器的增加，传递的 img 不能被 resize 裁剪为更大的尺寸。 

$('#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"
    });  
});
4

2 回答 2

1

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

  • $($(this))是相同的$(this)
  • $(this)[0]何时this是 DOM 元素与this
  • you cannot assign a value to a jquery object in order to replace the referenced DOM element, so the $(this) = img does not work (it is what throws that error you mention)

Now, the plugin you use (http://code.google.com/p/resize-crop/) wraps the targeted element in another in order to do its thing..

You will have to unwrap the element, and clear its style for the re-applying of the plugin to work. Also the plugin works as well with a set of element, not only for single elements so you do not have to use .each() to run the plugin for each image..

$('#image img').unwrap().removeAttr('style').resizecrop({
        width:width,
        height:height,
        vertical:"top"
    });
于 2013-02-21T18:26:53.503 回答
0

您无需在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"
    });  
});
于 2013-02-21T18:07:20.960 回答