Question

我想在加载和调整大小时调用该函数。

有更好的方法可以更紧凑地重写这个吗？

$('.content .right').width($(window).width() - (480));
$(window).resize(function(e) {
    $('.content .right').width($(window).width() - (480));
});

Answer 1

您可以单独绑定到resize事件，并在加载时自动触发此事件：

// Bind to the resize event of the window object
$(window).on("resize", function () {
    // Set .right's width to the window width minus 480 pixels
    $(".content .right").width( $(this).width() - 480 );
// Invoke the resize event immediately
}).resize();

最后一次.resize()调用将在加载时运行此代码。

Answer 2

我认为最好的解决方案就是将它也绑定到load事件：

$(window).on('load resize', function () {
    $('.content .right').width( $(this).width() - 480 );
});

Answer 3

很高兴发现重复逻辑并将其分解为函数：

function sizing() {
  $('.content .right').width($(window).width() - 480);
}

$(document).ready(sizing);
$(window).resize(sizing);

Answer 4

我将结合其他两个答案的最佳部分。首先，将重复的代码移动到函数中。其次，不要污染全局命名空间。

$(document).ready(function() {
  var adjust_size = function() {
    $('.content .right').width($(window).width() - 480);
  };
  adjust_size();
  $(window).resize(adjust_size);
});

我将函数命名为adjust_size，因为我更喜欢动词用于面向动作的函数。

Answer 5

简单方法：

html:
<body onload="$(window).resize()"> 

javascript:
$(window).resize(function () { 
...
});

结合onload和onresize（jQuery）

5 个答案: