我有一个JS函数,我需要在窗口调整大小时调用它。我发现使其工作的唯一方法是使用:
$(body).on('resize', function(){
myFunction();
});
有了这个,myFunction() 在窗口大小调整时执行。问题是我收到一个引用错误(正文未定义),所以我的 JS 的其余部分没有正确执行。
我尝试了不同的选择器:$("body"),$("document.body"),$(window),$(document),...有了它们,我没有收到引用错误,但函数没有执行。
这是看起来像(最小视图)我的html:
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
[ Alot of things ...]
<script src="main.js"></script>
</body>
</html>
因此,jQuery包含在我的头部部分中,而我的JS包含在关闭正文标签之前。
现在这看起来像我的主文件.js:
myFunction(){
alert("Hello world");
}
$(body).on('resize', function(){
myFunction();
});
$(document).ready(function(){
myFunction();
}
函数在页面加载时正常工作(带有 $(document).ready ),但我需要它在每次页面调整大小时运行。我搜索了很多来解决我的问题,但我被困住了。如果答案微不足道,我深表歉意。我是一个拥有JS和DOM元素选择器的菜鸟。
使用更多信息进行编辑:有问题的函数用于将多个div 设置为相等的高度。你可以在这里找到它 Equal Heightdivs with jQuery.我的div 组是一行 skelJS 网格系统。
所以最初的问题是,当我调整窗口大小时,divs 没有调整大小以适应响应式字体大小,所以我会溢出。显然,我试图在窗口/正文调整大小时调用该函数,但我无法让它工作,除非我使用 $(body) 选择器,这给了我一个引用错误,但随后溢出问题消失了,函数在调整大小时正常运行。真的很奇怪。我尝试了您的所有解决方案,似乎没有任何效果。
调整大小附加到窗口,而不是 document.body。
(function() {
function resizeFnc() {
console.log("resized called");
}
$(window).on("resize", resizeFnc); //calls it on resize
$(resizeFnc); //calls it on document ready
}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(body)
失败的原因是没有声明变量"body"。$("body")
和$(document.body)
失败的原因是该事件未在主体上触发,因此不调用它。
以及您链接到的代码。
function equalHeight(group) {
console.log("I was called");
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(function(){
equalHeight($(".EqHeightDiv"));
});
$(window).on("resize", function(){
console.log("resized called");
equalHeight($(".EqHeightDiv"));
});
.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>
现在损坏的是你正在使用的脚本。调用调整大小,它只是没有设置新的最大高度。因此,当触发所述窗口大小调整时,问题出在其他地方。
那么我们如何解决这个问题呢?
var timer;
function equalHeight(group) {
if (timer) window.clearTimeout(timer); //so this code is not called on every single resize
timer = window.setTimeout( function () {
var tallest = 0;
group.height(""); //reset the heights
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}, 10);
}
$(function(){
equalHeight($(".EqHeightDiv"));
});
$(window).on("resize", function(){
equalHeight($(".EqHeightDiv"));
});
.EqHeightDiv { width: 30% ;box-sizing: border-box; display: inline-block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div>
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>
试试这个。窗口是全局对象,不应有任何引用错误
function myFunction(){
alert("Hello world");
}
$(window).resize(function() {
myFunction();
});
$(document).ready(function(){
$(window).on('resize', function(){
myFunction();
});
});
这是在行动:https://jsfiddle.net/6t987c28/
如果你想改变或添加一个类到<body>
,那么它应该在你的函数中完成,而不是调整jQuery的大小:
$(window).on('resize', function() {
myFunction();
});
function myFunction() {
$('body').css('background', 'green');
// or
$('body').addClass('selector-name');
}