Question

我试图在浏览器窗口调整大小时编写一个调整某些元素的css宽度大小的函数，现在我似乎没有把事情做对，如果有人可以帮助我解决我出错的地方，我会喜欢它，到目前为止我的代码是：

function windowResize() {
            $('#content').css('width', $windowWidth);
            $('#div.mySection').css('width', $windowWidth);
            $('#div.mySection .story').css('width', $windowWidth);
        }

$(document).ready(function() {

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

            $(window).resize(function() {
                windowResize();
            });

        });

我不确定我是否已将所有内容放在正确的位置，如果有人可以告诉我如何使这些代码更好，那就太棒了。

由于凯尔

Answer 1

您缓存$windowWidth一次，因此它始终是相同的值。将var $windowWidth = $(window).width();移到windowResize函数的开头，您的代码就可以运行。

Answer 2

我会这样试试：

window.onresize = function(){
  var width = $(window).width();
  $('#content').css('width', width);
  $('#div.mySection').css('width', width);
  $('#div.mySection .story').css('width', width);
}

无需将其包装到domready函数中或使用jquery附加事件（但这样做应该不是问题）。

你没有说明究竟是什么问题（事件不会被解雇？你得到错误的结果吗？），但要改变的主要是在resize-function内部进行宽度计算（否则你只会计算一次，然后重新生成变量，不会产生任何影响。）

Answer 3

当窗口调整大小时，您需要在正在运行的函数内重新计算window的新尺寸;否则，你将永远重复相同的宽度。（顺便提一下，您的$windowWidth变量超出了windowResize函数的范围，这就是现在没有使用它的原因。）

function windowResize() {
        var windowWidth = $(window).width(); 
        $('#content').css('width', windowWidth);
        $('#div.mySection').css('width', windowWidth);
        $('#div.mySection .story').css('width', windowWidth);
    }

$(document).ready(function() {

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

        $(window).resize(function() {
            windowResize();
        });

    });

按照惯例，存储jQuery对象的变量以$为前缀，因此我将其从windowWidth中删除，这是一个普通的旧数字。

现在，这里是您的代码的警告：resize在某些浏览器中持续触发，这意味着您将继续连续运行您的处理程序，这可能是一件非常糟糕的事情。试试Ben Alman's throttle/debounce plugin;它会限制你的处理程序被调用的次数，“debouncing”或“限制”执行到给定的时间间隔一次。这样，你就可以实现你的效果，而不会将调整大小调整到你的DOM元素（这可能是痛苦的，并且是锁定UI的好方法）。

关于如何编写window.resize函数的一些建议？

3 个答案: