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

Question

这是我之前提出的一个问题的后续，但虽然现在大部分时间都在工作，但该函数将 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();

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