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

jQuery - get different values from elements with same class

本文关键字：元素 获取 同类 jQuery      更新时间：2023-09-26
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"，但我失败了。我需要此代码为每个单独的容器和他的子 img 单独操作，因为 6 个<img>中每个的大小都不同。

您需要遍历容器并处理

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');
        }
    });
}
相关文章：