jQuery - 从具有相同类的元素中获取不同的值

Posted 2023-05-09

【中文标题】jQuery - 从具有相同类的元素中获取不同的值

【英文标题】：jQuery - get different values from elements with same class

【发布时间】：2015-02-17 23:20:31

【问题描述】：

function ratioDetect () 

    var contWidth = $('.thumbnail-container').width()
    var contHeight = $('.thumbnail-container').height()
    var imgWidth = $('.thumbnail-container img').width()
    var imgHeight = $('.thumbnail-container img').height()

    var contRatio = contWidth/contHeight
    var imgRatio = imgWidth/imgHeight

    if (contRatio > imgRatio) 
        $('.thumbnail-container img').removeClass('full-height')
        $('.thumbnail-container img').addClass('full-width')
    
    else
        $('.thumbnail-container img').removeClass('full-width')
        $('.thumbnail-container img').addClass('full-height')
    

这个函数的作用应该很清楚，问题是我有 6 个这样的“缩略图容器”，所以脚本只从 FIRST 容器中获取值，并仅根据该容器内的 img 进行数学运算并将这些值应用于所有其他图像。

我尝试按照一些关于“.this”用法的教程进行操作，但失败了。我需要为每个单独的容器和他的 child-img 单独执行此代码，因为 6 个 <img>s 中的每一个的大小都不同。

【参考方案1】：

你需要遍历容器并处理

function ratioDetect() 

    $('.thumbnail-container').each(function () 
        var $this = $(this),
            $img = $this.find('img'),
            contWidth = $this.width(),
            contHeight = $this.height(),
            imgWidth = $img.width(),
            imgHeight = $img.height();

        var contRatio = contWidth / contHeight,
            imgRatio = imgWidth / imgHeight;

        if (contRatio > imgRatio) 
            $img.removeClass('full-height');
            $img.addClass('full-width');
         else 
            $img.removeClass('full-width');
            $img.addClass('full-height');
        
    );

【讨论】：

认为你想要$this.find('img')而不是$this('img')，并且始终使用$img而不是$this.find('img')。

控制台：“未捕获的类型错误：对象不是函数”在第 120 行，即“$img = $this('img')”不起作用

Alberto：按照我的评论进行调整。