Question

我有2个jQuery函数，基本上写的除了第1行之外都是相同的：

$(document).ready(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

$(window).resize(function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
});

所以我想知道是否有可能将它们合并为1个怎么样？

一如既往地感谢。

Answer 1

您可以手动触发resize事件：

$(function() { // shortcut for $(document).ready(function() {...});
    $(window).resize(function() {   // bind the handler
        $('#foo').css({
            'height': $(window).height(),
            'width': $(window).width()
        });
    }).resize(); // trigger the resize event
});

或创建一个额外的函数并将其绑定到两个事件：

function resizeHandler() {
    $('#foo').css({
        'height': $(window).height(),
        'width': $(window).width()
    });
}

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

顺便说一下。 $(function(){...});是$(document).ready(function(){...});的快捷方式。

Answer 2

var myFunction = function() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
}

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

Answer 3

像这样：

function yourfunc() {
 var h = $(window).height();
 var w = $(window).width();
 $('#foo').css({'height' : h});
 $('#foo').css({'width' : w});
}

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

另一种称呼方式（更长但更容易理解）是：

$(document).ready(function(){
   yourfunc();
});
$(window).resize(function(){
   yourfunc();
});

两者都有效。希望这可以帮助。干杯

Answer 4

创建第三个功能

function calculateSomething(){
  var h = $(window).height();
  var w = $(window).width();
  $('#foo').css({'height' : h, 'width' : w}});
}

然后调用函数

$(document).ready(calculateSomething);

$(window).resize(calculateSomething);

Answer 5

你也可以使用do：

$(window).bind('load resize', function(e){
    $('#foo').css({'width' : $(window).width(), 'height': $(window).height()});
});

合并2个jQuery函数

5 个答案: