0

これは私が以前に尋ねた質問からのフォローアップですが、現在はほとんど機能していますが、関数は への参照として 3 つの画像の最初のものを取得しておりaddClass()、if / else. 理由はありますか？

画像 1 & 3 = ランドスケープ - 正しく追加.heightDefine

画像 2 = ポートレート -.heightDefine代わりに間違って追加も.widthDefine

jQuery.fn.galDisplay = function () {
    var galSingleImgH = this.height();
    var galSingleImgW = this.width();
    if(galSingleImgW > galSingleImgH){
        this.addClass('heightDefine');
    } else if(galSingleImgW < galSingleImgH){
        this.addClass('widthDefine');
    } 
}
jQuery('.notFirst img').galDisplay();
4

3 に答える 3

3

jQueryは実際に一致する要素のコレクションを提供するのでthis、単一の結果ではなくコレクションも提供します。

これに対処するには、次を使用してコレクションを繰り返しますeach。

jQuery.fn.galDisplay = function () {
    this.each(function () {
        var $self = $(this);
        var galSingleImgH = $self.height();
        var galSingleImgW = $self.width();
        alert(galSingleImgW + ' ' + galSingleImgH);
        if(galSingleImgW > galSingleImgH){
            $self.addClass('heightDefine');
        } else if(galSingleImgW < galSingleImgH){
            $self.addClass('widthDefine');
        } 
        // else it is square!
    });
}
jQuery('.notFirst img').galDisplay();

そして、私が追加する他の唯一のことは、画像サイズの計算に依存している場合は、画像が読み込まれるまでこれを実行したくないということです。

于 2013-02-26T13:16:36.710 に答える
2

コレクション全体で同じ関数を実行しています。各要素で if/else を実行する必要があります。

jQuery.fn.galDisplay = function (){
    return this.each(function() {
        var galSingleImgH = $(this).height(),
            galSingleImgW = $(this).width();

        if (galSingleImgW > galSingleImgH) {
            $(this).addClass('heightDefine');
        } else if (galSingleImgW < galSingleImgH) {
            $(this).addClass('widthDefine');
        } 
    });
}

jQuery('.notFirst img').galDisplay();
于 2013-02-26T13:06:19.403 に答える
0

試す

(function($)
{
    $.fn.galDisplay = function(params)
    {
        //params = $.extend( {minlength: 0, maxlength: 99999}, params);
        //above code extends options passed

        this.each(function()
        {
            var galSingleImgH = this.height();
            var galSingleImgW = this.width();
            if(galSingleImgW > galSingleImgH)
            {
               this.addClass('heightDefine');
            }
            else if(galSingleImgW < galSingleImgH)
            {
               this.addClass('widthDefine');
            } 
        });
        return this;
    };
})(jQuery);
于 2013-02-26T13:07:10.613 に答える