Question

我正在使用的代码

var height = $(window).height(); 

if (height>=768) {
  //change class for example.
}
else {
  //change class back.
}

上面的代码非常适合检测视图端口高度并应用类更改，但如果我调整浏览器窗口大小，我也希望这个脚本能够检测到何时发生这种情况，并且基本上重新运行该函数更新的高度值。怎么样？

我尝试过在StackOverflow上找到的以下解决方案。我能够成功实现它们，但是，我仍然需要刷新站点才能使函数应用类更改。它没有在浏览器调整大小上执行此操作。

这是一个：

  var width = $(window).width();

  $(window).resize(function(){
    if($(this).width() != width){
      width = $(this).width();
      console.log(width);
    }
  });

这是我尝试过的另一个问题。我必须在新的视图端口设置中刷新浏览器，以使其识别差异。

var height = $(window).height();

window.addEventListener('resize', setWindowSize);

function setWindowSize() {
  if($(this).height() != height){
  height = $(this).height();
  console.log(height);
  }
}

if (height <= 859  ) {
  $(".stats-events-2").removeClass("show-set").addClass("hide-set");
}
else {
  $(".stats-events-2").removeClass("hide-set").addClass("show-set");
}

所以我要做的是检测视口中的每个更改，每次更改时在脚本中设置它，如果视图高度低于某个点，则指定某个类，反之亦然。任何帮助非常感谢。

Answer 1

var height = $(window).height();

window.addEventListener('resize', setWindowSize);

function setWindowSize() {
    if($(this).height() != height){
        height = $(this).height();
        console.log(height);
    }
}

if (height <= 859  ) {
    $(".stats-events-2").removeClass("show-set").addClass("hide-set");
} else {
    $(".stats-events-2").removeClass("hide-set").addClass("show-set");
}

正如我在评论中提到的那样，如果您所有的后续内容都是一些样式更改，那么您尝试做的事情可能会通过媒体查询完成。除此之外，上面的逻辑只是在窗口变化时设置高度。类更改逻辑不在处理程序中，因此不进行评估。它需要在你的处理程序中。

var $window = $(window);
var $statsEvents2 = $(".stats-events-2");

$window.on('resize', function() {
    if ($window.height() <= 859) {
        $statsEvents2.removeClass("show-set").addClass("hide-set");
    } else {
        $statsEvents2.removeClass("hide-set").addClass("show-set");
    }
});

Jquery - 如何在不刷新浏览器的情况下检测浏览器高度的变化？

1 个答案: