Конфликты jquery между отдельными функциями

Когда дело доходит до 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 к элементу jQuery с именем $ content, который определен внутри функции.

$(".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), но оно представляет разные элементы на странице, в зависимости от функции.

Тем не мение,

Я обнаружил, что первая функция применяла стиль margin-top (из первой функции) к элементу $ content во второй функции - другими словами, $ content просочился между двумя функциями.

Я дважды проверил иерархию - #content - это уникальный div, в то время как "ul" не имеет идентификатора - так что определенно не было конфликта из-за выбора неправильного элемента.

Поэтому я добавил "var" к элементу $ content и, о чудо, проблема устранилась.

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

Вопрос в том, почему утечка $ content, а var $ content - нет? Я ценю это, если бы кто-нибудь мог объяснить разницу и почему добавление var исправило ее.

Это потому, что когда вы помещаете перед ним var, он инициализирует переменную. Если вы этого не сделаете, он использует существующую переменную, объявленную в другом месте.

Mark Baijens 10.09.2018 10:28

Я предполагаю, что это был крайний случай, потому что я щелкал и потенциально прокручивал одновременно, используя одно и то же имя переменной.

John Ohara 10.09.2018 10:31
0
2
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

Мой совет: инициализируйте переменные ВСЕГДА с помощью вар, позволять или const. Это избавит вас от головной боли, поскольку вы явно декларируете его область действия.

По какой-то причине я подумал, что jQuery закулисно творит чудеса для селекторов.

John Ohara 10.09.2018 10:37

jQuery предлагает вам API, который многое делает за вас, но не меняет правил языка.

Enrique Moreno Tent 10.09.2018 10:39

Другие вопросы по теме