如果窗口比“x”宽,我将在浏览器加载时加载 equalheights 函数。如果我想添加我的功能,我还想在浏览器调整大小以“重新测试”时再次检查“x”。
不知道该怎么做:
// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query
jQuery(document).ready(function($) {
//set the initial values
detectorColumn = jQuery('.js');
compareWidthColumn = detectorColumn.width();
smallScreenColumn = '481';
if ($(window).width() > smallScreenColumn) {
$('#sidebar_right').equalHeights();
}
jQuery(window).resize(function() {
//compare everytime the window resize event fires
if (detectorColumn.width() != compareWidthColumn) {
//a change has occurred so update the comparison variable
compareWidthColumn = detector.width();
if (compareWidthColumn > smallScreenColumn) {
$('#sidebar_right').equalHeights();
}
}
});
});
整个概念是,我只想在浏览器宽度超过 481px 时应用“equalHeights”。这被应用于流体布局,我希望用户能够调整浏览器的大小,因此调用 resize。
问题: 初始加载工作正常,仅当窗口宽度大于 481px 时才调用 equalHeight。问题是,如果用户从宽度超过 481 px 的浏览器开始,然后将其缩小,则 equalHeight 不会被删除。
我该如何解决这个问题? *我尝试学习 jQuery,所以有点新。
编辑 评论中提到我测量了不同的东西,所以我也尝试了这个:
jQuery(document).ready(function($) {
//set the initial values
detectorColumn = jQuery('.js');
compareWidthColumn = detectorColumn.width();
smallScreenColumn = '481';
if ($(window).width() > smallScreenColumn) {
$('#sidebar_right').equalHeights();
}
jQuery(window).resize(function() {
if ($(window).width() > smallScreenColumn) {
$('#sidebar_right').equalHeights();
}
});
});
我仍然遇到 equalHeights 不“重新测量”屏幕上的元素调整大小的问题,并且如果屏幕小于 480px,则不会自行删除。
编辑2* 我应该提到我使用两种不同测量的原因是在这个脚本之前,我声明了一些全局变量:
这是我的 jquery 页面顶部的脚本上方。
// global variables
var compareWidthColumn, //previous width used for comparison
detectorColumn, //the element used to compare changes
smallScreenColumn, // Size of maximum width of single column media query
我的想法是,如果我在函数之外声明它们,它们将存储这些值。然后当屏幕大小调整时,它会将新值与全局值进行比较,如果有变化,则重做该功能。
这样的逻辑很糟糕吗?
最佳答案
也许我在这里遗漏了一些东西,但以下简单的方法应该有效(至少它会做一些事情):
$(function() {
var $sidebar_right = $('#sidebar_right'),
smallScreenColumn = 481;
$(window).on('resize', function() {
$sidebar_right.height('auto');//remove previously applied equalHeights.
if($(window).width() > smallScreenColumn) {
$sidebar_right.equalHeights();
}
}).trigger('resize');
});
我假设 .height('auto')
是基于评论 here 删除先前应用的 .equalHeights()
的正确方法。 .
您可能希望重新引入 DetectorColumn
等,但至少从表面上看,这似乎是不必要的复杂化。
当文档中的所有示例均采用 $(classSelector 形式) 时,我仍然不明白将
。如果我的理解是正确的,那么类似 .equalHeights()
应用于容器会如何影响其中包含的 div ).equalHeights();$('#sidebar_right > div')
会更合适(即所有 sidebar_right 的子 div)。
编辑:我的错。通过在容器元素上设置 .equalHeights()
,它会自动“循环遍历顶级子节点”。请参阅下面@shaWn 评论中的链接。
关于jquery - 如果 'x' 为 true,则删除已在浏览器调整大小时准备就绪的文档上加载的函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11487362/