在窗口大小调整时运行jQuery脚本
在窗口大小调整时运行jQuery脚本
提问于 2014-07-11 08:40:09
我有一些脚本可以在窗口大小调整时运行各种函数，
$.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();
};回答 2
Stack Overflow用户
回答已采纳
发布于 2014-07-11 09:11:14
你的负载事件不是在我试过的样本中发射的。
不要注册当前的事件，尝试如下：
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", '');
});Stack Overflow用户
发布于 2014-07-11 08:47:58
jQuery只是包装标准的调整DOM事件，例如。
window.onresize = function(event) {
...
};jQuery可能会做一些工作，以确保在所有浏览器中一致触发调整大小事件，但我不确定是否有任何浏览器不同，
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24693509
复制相关文章
相似问题
腾讯云开发者
