Question

这是我之前提出的一个问题的后续内容，但虽然现在大部分都在使用，但该功能正在拍摄3张图片中的第一张照片，因为它引用了addClass()而没有关注{{1} }。知道为什么吗？

图1＆amp; 3 =横向 - 正确添加if / else

图片2 =人像 - 错误地添加了.heightDefine而不是.heightDefine

.widthDefine

Answer 1

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();

我要添加的另一件事是，如果你依赖于计算图像大小，你不想在加载图像之前运行它。

Answer 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();

Answer 3

尝试

(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);

jQuery函数只影响3个中的一个img

3 个答案: