调整窗口大小时调整元素的高度

Question

调整窗口大小时调整元素的高度

3

我遇到了一个jQuery的问题。无法想出如何解决。我有多个高度不同的部分：

<section id="1" class="something" style="height:111px; background:red;">1</section>
<section id="2" class="something" style="height:222px; background:blue;">2</section>
<section id="3" class="something" style="height:333px; background:green;">3</section>

当窗口小于500px时，我的jQuery会缩放每个部分的高度：

var org_height = $('.something').height();

$(window).resize(function() {

    $(".something").each(function() {

        var win = $(window).width();
        var height = $('.something').height();

        if(win < 500) {
            y = 500 - win;
            $('.something').css("height",org_height-y/3+"px");
        }
        else {
            $('.something').css("height",org_height+"px");
        }
    });   

});

JSFiddle: https://jsfiddle.net/owtz31jj/

如何存储每个部分的原始高度，并根据每个高度进行缩放，然后再恢复到原始高度。我非常感谢任何帮助。

- Stoef23

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andreas Louv · Accepted Answer

你可以使用 jQuery.fn.data：

// Store original height for each .something
$(".something").each(function() {
    $(this).data('org_height', $(this).height());
});
$(window).on('resize', function() {
    var win = $(window).width();
    $(".something").each(function() {
        // Get the value storred in org_height using jQuery.fn.data
        var org_height = $(this).data('org_height'); 
        if(win < 500) {
            var y = 500 - win;
            $(this).css("height", org_height - y/3);
        }
        else {
            $(this).css("height", org_height);
        }
    });   
});