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

Question

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 中的每一个的大小都不同。

Answer 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');
        }
    });

}