jQuery函数在$(window).resize()或$(document).ready()上执行,而不是两者都执行
jQuery function executes on $(window).resize() or $(document).ready() not both
我编写了一个函数来调整一些<div>
s的大小。该函数适用于$(document).ready()
或$(window).resize()
,但不能同时适用。因此,当我更改窗口大小以更改div高度时,我必须刷新浏览器,或者我必须更改窗口大小,然后函数将执行,div将变为等高。
我的代码如下:
function findTallest() {
var tallestBlock = 0;
$('.homepageIntroBlocks').each(function() {
if ($(this).height() > tallestBlock) {
tallestBlock = $(this).height();
}
});
$('.homepageIntroBlocks').each(function() {
$(this).height(tallestBlock);
});
}
$(document).ready(function() {
findTallest();
$(window).on('resize', findTallest);
});
.homepageIntroBlocks {
background-color: green;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
<section class="col_3 homepageIntroBlocks" id="notANumberBlock" data-thisBlockText="notANumberBlockText">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="toHelpYouBlock" data-thisBlockText="toHelpYouBlockText">
<h3>We're here<br /> to help you...</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="whoMadeItBlock" data-thisBlockText="whoMadeItBlockText">
<h3>We're the people<br /> who made it...</h3>
</section>
<section class="col_3 homepageIntroBlocks" id="itsYourEventBlock" data-thisBlockText="itsYourEventBlockText">
<h3>It's your event,<br /> on us...</h3>
</section>
</div>
我试过这个解决方案,但它也有同样的问题。我也试过:
$(window).on('resize', findTallest).trigger('resize');
$(window).on('resize', findTallest).bind('load');
$(window).on('resize load', findTallest);
$(window).load(findTallest);
$(window).resize(findTallest)
$(window).on('load', findTallest).trigger('resize');
但它们都没有奏效。我也尝试过将$(window).resize()
移到$(document).ready()
之外,但没有效果。
它看起来像是在代码段中工作,但这是因为它是在加载文档时执行的。如果你看看这个jsfiddle,你可以看到它在加载时可以工作,但如果你调整页面的大小,那么你必须再次运行这个片段来调整div的大小。你还可以看到,如果你像我在另一个jsfiddle中那样注释掉findTallest()
,那么当文档加载时,div的高度是不同的,但如果你调整浏览器的大小,那么函数就会执行,div变为相等的高度,然后如果你刷新高度重置,它们再次变为不同的高度。
我也有同样的问题,我写了一个不同的函数,在页面底部制作页脚。我感谢大家的帮助,如果你需要更多信息,请告诉我。
使用.height(tallestBlock)
设置高度后,高度都相同。在函数的开头添加$('.homepageIntroBlocks').css('height','auto')
以重置高度。
function findTallest() {
var tallestBlock = 0;
$('.homepageIntroBlocks').css('height','auto')
$('.homepageIntroBlocks').each(function() {
if ($(this).height() > tallestBlock) {
tallestBlock = $(this).height();
}
});
$('.homepageIntroBlocks').each(function() {
$(this).height(tallestBlock);
});
}
$(document).ready(function() {
findTallest();
$(window).on('resize', findTallest);
});
https://jsfiddle.net/SeanWessell/9L1zxs8f/
- 组合regex,同时匹配两者,而不是两者都匹配
- 如何更改其内容的 Iframe 高度(两者都来自同一域)
- 重用另一个模板中的 Mustache 模板,如果两者都在一个 html 文件中定义
- 我在表单页面上有一个弹出窗口以及一个隐藏元素,具体取决于用户输入.两者都使用 jquery
- 元素及其父元素指定了 ng-单击,两者都被调用
- 如何从.js文件访问asp标记中的js变量(两者都在同一页上执行)
- 节点-工厂或构造函数,或者两者都没有
- jQuery函数在$(window).resize()或$(document).ready()上执行,而不是两者都执行
- 执行单击或双击.不是两者都有
- 从js调用php函数-两者都在单独的文件中
- 允许Javascript模块(类)与CommonJS、AMD或两者都不使用
- 为什么两者都承诺's然后&catch回调被调用
- 确定属性在JavaScript中是getter还是setter(或两者都有)
- AngularJs或NodeJs或两者都有
- AngularJS和jQuery..两者都用有什么不对?
- Javascript: getElementById vs getElementsById(两者都在不同的页面上工作)
- 谷歌地图标记或地图将显示,但不是两者都显示
- 是否有理由使用array.forEach()而不是for..在ES6中,两者都可以使用
- 我想在第一个选择的基础上填充第二个选择表单.两者都在从sql数据库中检索它们的元素
- jQuery1.9将html附加到页面中,然后是一个脚本,两者都依赖于文档准备