かなり簡単です：うまく定義済みの関数を.each（）で使用できますか？

Question

たとえば、これが機能する方法はありますか？

function resizer() { 
    $(".rezimg").each(sizing($(".rezimg"))) 
    } 
function sizing(im) { 
    im.css({"width": "auto", "height": "auto"}); 
    var imight = im.height(); 
    var imidth = im.width(); 
    var idth = im.parent().width(); 
    var ight = im.parent().height(); 
    var aspecti = (imight/imidth); 
    var aspectc = (ight/idth); 
    if (aspectc>aspecti){ 
     im.css({"width": idth+"px", "height": "auto"}) 
    } 
    else if(aspectc<aspecti){ 
     im.css({"height": ight+"px", "width": "auto"}); 
    } 
    else if(aspectc==aspecti){ 
     im.css({"width": idth+"px", "height": ight+"px"}); 
    } 
} 

私の意図はここではっきりしていることを希望します。 sizing（）はイメージの高さをコンテナに比較し、それに応じてフィットする関数です。コード全体でさまざまな点で使いたいと思います。ありがとう。

Answer 1

はい、可能ですが、変更が必要です。以下の作業をする必要があります：

あなたが書いた何

function resizer() { 
    // notice that sizing is not a function call, but a reference 
    $(".rezimg").each(sizing) 
} 

// should also be possible to call it directly on an element 
function sizing(im) { 
    // jQuery each sets the first argument to a number, otherwise it's an element 
    var im = (typeof im === 'number') ? $(this) : im; 

    im.css({"width": "auto", "height": "auto"}); 
    var imight = im.height(); 
    var imidth = im.width(); 
    var idth = im.parent().width(); 
    var ight = im.parent().height(); 
    var aspecti = (imight/imidth); 
    var aspectc = (ight/idth); 
    if (aspectc>aspecti){ 
     im.css({"width": idth+"px", "height": "auto"}) 
    } 
    else if(aspectc<aspecti){ 
     im.css({"height": ight+"px", "width": "auto"}); 
    } 
    else if(aspectc==aspecti){ 
     im.css({"width": idth+"px", "height": ight+"px"}); 
    } 
} 

Answer 2

関数パラメータとしてサイジングを指定できます。引数はthisで、これは ".rezimg"で表されるdom要素です。詳細についてはSee the docsをご覧ください。

function resizer() { 
    $(".rezimg").each(sizing) 
} 

function sizing(el) { 
    var im = $(el); 
    im.css({"width": "auto", "height": "auto"}); 
    // ... 
} 

Answer 3

：

$(".rezimg").each(sizing($(".rezimg"))) 

は$(".rezimg")引数で直接機能sizing()を実行します。しかし、eachの場合、eachは関数としてパラメータを必要とし、sizing($(".rezimg"))は関数ではありません（実際にはundefinedとしてsizing()は何も返しません）ので、実行されません。

どの機能を実行する必要があり、どのパラメータを使用するかは、eachと言います。 sizing.pass($(".rezimg"))として

$(".rezimg").each(sizing.pass($(".rezimg"))) 

したいパラメータが事前にフォーマットさ関数を返す：あなたがすることを行うことができます。

Answer 4

確かに、いくつかの方法があります。サイジングを呼び出してサイジングの引数を変更して、以下のようなインデックスと画像要素を受け入れることができます。

function resizer() { 
    $(".rezimg").each(sizing); 
} 
function sizing(index, img) { 
    im.css({"width": "auto", "height": "auto"}); 
    var imight = im.height(); 
    var imidth = im.width(); 
    var idth = im.parent().width(); 
    var ight = im.parent().height(); 
    var aspecti = (imight/imidth); 
    var aspectc = (ight/idth); 
    if (aspectc>aspecti){ 
     im.css({"width": idth+"px", "height": "auto"}) 
    } 
    else if(aspectc<aspecti){ 
     im.css({"height": ight+"px", "width": "auto"}); 
    } 
    else if(aspectc==aspecti){ 
     im.css({"width": idth+"px", "height": ight+"px"}); 
    } 
} 

それとも

function resizer() { 
    $(".rezimg").each(sizing) 
} 

function sizing() { 
    var im = $(this); 
    im.css({"width": "auto", "height": "auto"}); 
    var imight = im.height(); 
    var imidth = im.width(); 
    var idth = im.parent().width(); 
    var ight = im.parent().height(); 
    var aspecti = (imight/imidth); 
    var aspectc = (ight/idth); 
    if (aspectc>aspecti){ 
     im.css({"width": idth+"px", "height": "auto"}) 
    } 
    else if(aspectc<aspecti){ 
     im.css({"height": ight+"px", "width": "auto"}); 
    } 
    else if(aspectc==aspecti){ 
     im.css({"width": idth+"px", "height": ight+"px"}); 
    } 
}