0

ブラウザの幅が狭くなるにつれて、一連の画像のサイズを変更しようとしています。次のコードは問題なく動作しますが、もちろん、ブラウザが大きくなると、渡される 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"
    });  
});
4

2 に答える 2

1

あなたが持っているように見えるいくつかの誤解をクリアしましょう。

  • $($(this))と同じです$(this)
  • $(this)[0]thisDOM要素がと同じである場合this
  • 参照されたDOM要素を置き換えるためにjqueryオブジェクトに値を割り当てることはできないため、$(this) = imgは機能しません（これが、あなたが言及したエラーをスローするものです）

これで、使用するプラグイン（http://code.google.com/p/resize-crop/）は、対象の要素を別の要素にラップして、その機能を実行します。

プラグインを再適用するには、要素のラップを解除し、そのスタイルをクリアする必要があります。また、プラグインは、単一の要素だけでなく、要素のセットでも機能する.each()ため、各画像のプラグインを実行するために使用する必要はありません。

$('#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 に答える