选择器 $(body） 有效但破坏了代码(引用错误），而 $(“body”） 没有显示错误但不起作用

Selector $(body) works but break the code (reference error) while $("body") shows no error but dont work

本文关键字：错误 body 不起作用 显示 代码 有效 坏了 选择器 引用      更新时间：2023-09-26

我有一个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');
}
相关文章：