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个＆＃34; thumbnail-container＆＃34;所以脚本只从FIRST容器中获取值，并根据此容器中的img进行数学计算，并将值应用于所有其他图像。

我已经尝试过关于＆＃34; .this＆＃34;的一些教程。用法，但我失败了。我需要为每个单独的容器和他的child-img分别执行此代码操作，因为6 <img>中每个容器的大小都不同。

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

}

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

1 个答案: