jQuery窗口调整大小麻烦答案

【问题标题】：jQuery window resize troublejQuery窗口调整大小麻烦
【发布时间】：2013-03-06 03:12:09
【问题描述】：

以下代码应仅在 768 像素以上的屏幕尺寸上触发一次（在加载和调整窗口大小时）：

$('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));

我不希望它在尺寸低于 768 像素时触发。这不起作用，因为它会在调整大小时多次触发并且不会将其删除到 768px 以下：

$(function() {
    $(window).resize(function() {
        if($(this).width() >= 768) {
            $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
        }
    }); 
});

Codepen：http://codepen.io/anon/pen/zgxir

有人有解决办法吗？

【问题讨论】：

我不确定您是否可以将 $(this) 用于 $(window)，您尝试过 if($(window).width() >=768) 吗？
您是否意识到.resize() 在最终用户调整大小操作期间被多次调用？在调整窗口大小时，您会得到许多中间点 - 它不仅仅是在最终大小时触发一次。
@jfriend00 是的，我知道。我不知道我是否应该使用.resize()。但如果您将窗口大小调整到 768 像素以下，我不希望它触发。

标签： jquery resize window

【解决方案1】：

如果只需要触发一次代码为什么不直接：

$(function() {    
  if ( $(window).width() >= 768 ) {
    //yourcode here
    $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
  }
});

编辑-如果你想动态改变窗口大小，你可以这样做：

$(function() {
  var 
  bh = $('.banner').css('height'),        
  bm = $('.content').css('margin');
  $(window).resize(function() {
    if($(window).width() >= 768) 
    {
      $('.content').css('margin', bh+bm);
    }
    else 
    {
      $('.content').attr('style','');
    }
  });
});

将变量放在窗口调整大小事件之外很重要，否则当窗口改变大小时它们将永远递增。我使用 else 语句来清除 div 的样式属性，以便将样式返回到原始状态。

【讨论】：

我试过这个，但它只能在加载时工作，如果你将窗口大小调整到 768px 以下，我不希望它触发。也许我必须做一个 if/else 语句？
我更新了答案，我希望这就是你要找的
这正是我想要的。 else {$('.content').attr('style','');} 成功了。干得好，谢谢！
虽然在firefox上好像不行，但是在webkit上没问题，demo codepen.io/michaelnie/pen/AtCoL
firefox 中的 paseInt() 函数似乎有问题。只需将其删除即可正常运行。

【解决方案2】：

您可能正在寻找的是这个

$(function() {
    var flag = false;
    $(window).resize(function() {
        console.log($(window).width())
        var width = $(window).width();
        if (!flag && width >= 768) {
            flag = true;
            console.log('set')
            $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
        } else if (width < 768) {
            flag = false;
        }
    });

});

演示：Here

【讨论】：

当您将窗口大小调整到 768 像素以下时，它仍然会触发。
@michael 您不希望事件触发宽度，您不希望事件执行 $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));
如果当前窗口宽度 $('.content').css('margin', parseInt($('.banner').css('height')) + parseInt($('.content').css('margin')));。
如果您看到此演示 codepen.io/arunpjohny/pen/tyKoc，仅当您将尺寸从 = 768 尺寸时才会出现警报。一旦 >= 768，在此范围内的任何调整大小都不会触发警报
是的，如果您将窗口大小从 768，则可以正常工作，但反之则不然。请参阅此 CSS 演示 codepen.io/michaelnie/pen/Estdy

【解决方案3】：

问题不在于 javascript，而在于 (.content) div 的 css 属性。因为它或它的父级都没有宽度值，所以无论屏幕的宽度如何，它都会在调整大小时扩展。屏幕宽度

但是您可以使用 css 设置最小宽度：

.content{
    min-width: 768px;
}

【讨论】：