在窗口大小调整上运行jQuery脚本

Question

我有一些脚本可以在窗口调整大小上运行各种函数，

$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);

function resizeFrame(){
    // various scripts //
}

这非常好用，我在那里运行的脚本也可以工作。然后我有一个单独的脚本，设置文档加载的各种div的高度，这也很好。

var h = 0,
    target = $('.home #content .items-row .item article');

target.each(function(){
    if (h < $(this).height()){
        h = $(this).height();
    }
}); 
target.each(function () {
    $(this).css("height", h + 'px');
});
$('.testimonials .items-row').each(function () {
    $('.span4 article', this).css('height',
        Math.max.apply( Math, 
            $.map($('.span4 article', this), function(x) {
                return $(x).height();
            })
        )
    );
});

然而，当我尝试将两者结合使用时，我的div将在加载时调整大小，但不会再次调整窗口大小。这就是我将两者结合起来的方式，

function articleResize(){
    var h = 0,
        target = $('.home #content .items-row .item article');

    target.each(function(){
        if (h < $(this).height()){
            h = $(this).height();
        }
    }); 
    target.each(function () {
        $(this).css("height", h + 'px');
    });

    $('.testimonials .items-row').each(function () {
        $('.span4 article', this).css('height',
            Math.max.apply( Math, 
                $.map($('.span4 article', this), function(x) {
                    return $(x).height();
                })
            )
        );
    });
}

$.event.add(window, 'load', resizeFrame);
$.event.add(window, 'resize', resizeFrame);

function resizeFrame(){
    articleResize();
}

如果有人有任何线索，我们将不胜感激。

修改

这里的背景是resizeFrame的全部内容，

function resizeFrame(){

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

    function phoneEnable(){
        $('#MainNav ul.nav').prependTo('.sidr-inner').addClass('nav-list nav-collapse');
        $('#MainSocial ul.roundIcons').prependTo('.sidr-inner');
    };
    function phoneDisable(){
        $('#sidr ul.nav').prependTo('#MainNav').removeClass('nav-list nav-collapse');
        $('#sidr ul.roundIcons').prependTo('#MainSocial');
    }

    if (screenWidth >= 980){
        phoneDisable();
    } else{
        phoneEnable();
    };

        var highestBox = 0;
    $('.blog-featured .item article', this).each(function(){
        if($(this).height() > highestBox)
        highestBox = $(this).height();
        });
    $('.blog-featured .item article',this).height(highestBox);

    articleResize();
};

Answer 1

jQuery只是包装标准的resize DOM事件，例如。

window.onresize = function(event) {
    ...
};

jQuery可能会做一些工作来确保在所有浏览器中一致地触发resize事件，但我不确定是否有任何浏览器不同，

Answer 2

您尝试的样本中没有触发您的加载事件。

代替您当前的活动注册，请尝试以下操作：

JSFiddle：http://jsfiddle.net/j9SR5/1/

// jQuery DOM ready shortcut event handler (with locally scoped $)
jQuery(function($){

   // Register for window resize
   $(window).resize(resizeFrame);

   // Do initial resize
   resizeFrame();
});

更新：http://jsfiddle.net/TrueBlueAussie/j9SR5/5/

您正在设置固定高度，因此下次调整高度时，请按照之前的指定（并且不会更改）。新的JSFiddle首先将高度重置为自然状态。

// Revert to height based on content
target.each(function () {
    $(this).css("height", '');
});