Jquery

Question

我正在使用的代码

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

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

上面的代码非常适合检测视口高度并按应有的方式应用 class 更改，但是如果我调整浏览器的大小 window 我也希望此脚本检测何时发生这种情况并且基本上重新运行具有更新高度值的函数。怎么样？

我尝试了以下在 Whosebug 上找到的解决方案。我能够成功实施它们，但是，我仍然必须刷新站点才能使函数应用 class 更改。它不是在浏览器调整大小时这样做的。

这是一个：

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

所以我想做的是检测视口中的每个变化，每次更改时在脚本中设置它，这样如果视口高度低于某个点，就会分配某个 class反之亦然。非常感谢任何帮助。

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

正如我在评论中提到的那样，如果您之后要做的只是一些样式更改，那么您尝试做的事情可能可以通过媒体查询来完成。除此之外，上面的逻辑只是在 window 变化时设置高度。 class 更改逻辑不在处理程序中，因此未对其进行评估。它需要在您的处理程序中。

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 - 如何在不刷新浏览器的情况下检测浏览器高度的变化？

Jquery - How to detect change in browser height without having to refresh the browser?

viewport