Question

我尝试在满足特定屏幕尺寸时进行一些小编辑。这只适用于浏览器首次加载时。到目前为止我的代码：

   if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
    vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };

如果有人知道这将如何＆＃34;重新加载＆＃34;每次屏幕尺寸在受控物质中发生变化都会有很大帮助。

Answer 1

只需在窗口上绑定resize事件：

$(window).on('resize', function(){ ... });

修改假设 jQuery var是vwo_$，您可以使用：

vwo_$(window).on('resize', function() { (your logic here...) });

Answer 2

您可以使用.resize()事件处理程序来捕获和调整窗口大小http://api.jquery.com/resize/时的事件：

$(window).resize(function (){
  if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
   vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };
});

Answer 3

$(function(){
$(window).on('resize', function(){

if(vwo_$(window).width() >= 979){
    vwo_$('.move_cart_here').removeClass('span4');
    vwo_$('#sns_topheader .span12.topheader-left').removeClass('span8');
  };
  if(vwo_$(window).width() <= 978){
    vwo_$("#sns_header .container .row-fluid .header-right").append(vwo_$("#header_icons"));
  };

});
$(window).resize(); // for first time
});

如何在屏幕大小改变时重新执行jQuery

3 个答案: