Question

在调整大小时，它不会更新高度。一旦负载设置了它的高度，尽管我更新了变量，它仍然不会更新。

如果我取出设置高度的线条，那么我的变量会更新，但是一旦设置了高度，它就不会做任何事情。

我哪里出错？

var hero_height = $('.hero-image').outerHeight();
console.log('heroHeight: ' + hero_height);

$(document).ready(function() {
    $(window).load(function() {

        $('.hero-image').css('height', hero_height );

    });

    $(window).resize(function() {

        if (hero_height !== $('.hero-image').outerHeight()) {
            $('.hero-image').css('height', hero_height );
        };

        hero_height = $('.hero-image').outerHeight();
        console.log('heroHeight: ' + hero_height);

    });
});

这是一个JS小提琴 https://jsfiddle.net/5c1za6xa/

Answer 1

在窗口调整大小功能中包含var hero_height = $('.hero-image').outerHeight();。

$(window).resize(function() {
    var hero_height = $('.hero-image').outerHeight();
    if (hero_height !== $('.hero-image').outerHeight()) {
        $('.hero-image').css('height', hero_height );
    };

    hero_height = $('.hero-image').outerHeight();
    console.log('heroHeight: ' + hero_height);
});

Answer 2

你过分思考这个！你根本不需要jQuery，只需要CSS media queries。

这是一个例子

nav {
   display: block;
}

@media screen and (max-width: 480px) {
  nav {
    display: none;
  }
}

这将隐藏移动设备上的导航栏（或技术上，屏幕高度小于480px的任何内容）。您可以显然更改最大宽度和样式以满足您的需求。由于多种原因，这远远优于jQuery

这样更容易阅读
它不需要javascript，因此它适用于不支持javascript的用户/设备（这些日子几乎没有人授权）。但是，不使用javascript也会极大地加快页面加载时间。
一般情况下（自CSS3发布以来），您几乎不需要使用javascript（或jQuery）来调整样式。因此，既然您正在尝试更改页面的样式/外观，则应使用CSS。将JS留给网页的动态功能，而不是样式。

jquery调整大小后元素高度不更新

2 个答案: