Question

在javascript的帮助下，我几乎可以通过jQuery的帮助。

但是，我遇到了一个问题，该问题改变了我对jQuery元素的作用域的看法。

这个问题暴露出来是因为元素正在应用margin-top样式，即使它自己的代码没有任何办法也是如此。在进一步调查中，我发现涉及另一个完全独立的功能。这是两个函数：

function docScroll() {
    var headerHeight = $("#app-header").outerHeight();
    var appBarHeight = $("#app-bar").outerHeight();

    $body = $("body");
    $content = $("#content");

    $(document).scroll(function () {
        if ($(window).scrollTop() > appBarHeight) {
            $body.addClass("scrolled");
            $content.css("margin-top", headerHeight);
        }
        else {
            $body.removeClass("scrolled");
            $content.css("margin-top", "");
        }
    });
}

从上面的函数中可以看到，它将margin-top值应用于名为 $ content 的jQuery元素，该元素在函数内部定义。

$(".toggle-next").click(function () {
    $container = $(this).closest(".toggle-container");

    $container.toggleClass("toggle-active");

    $content = $container.children("ul");

    if ($content.css("max-height") !== "0px") {
        $content.css("max-height", "");
    }
    else {
        $content.css("max-height", $content[0].scrollHeight + "px");
    }
});

上面的函数将max-height值应用于也称为 $ content 的元素，但是我再次假设该元素仅在函数内作用域。

如您所见，元素名称相同（$ content），但是根据功能，它表示页面上的不同元素。

但是

我发现，第一个函数在第二个函数中的$ content元素上应用了页边距样式（来自第一个函数）-换句话说， $ content在两个函数之间泄漏了。

我仔细检查了层次结构-#content是唯一的div，而“ ul”没有ID-因此通过选择错误的元素绝对不会发生冲突。

因此，我在$ content元素中添加了一个“ var，瞧，它解决了这个问题。

var $content = $("#content");

问题是为什么 $ content 泄漏而 var $ content 没有泄漏？如果有人可以解释差异以及为什么添加var可以解决差异，我将不胜感激。

Answer 1

如果不初始化变量，它将被视为全局变量。

没有初始化的示例

function f() {
    a = 3;
}

f();

console.log(a); // Displays a 3

初始化示例

function f2() {
    var b = 3;
}

f2();

console.log(b); // Error: b is not defined

我的建议：始终使用 var ， let 或 const 初始化变量。因为您明确声明了它的范围，这将使您免于头痛。

jQuery在各个函数之间发生冲突

1 个答案: