為什么無法訪問分配了jquery對象的函數內部變量

Question

我無法訪問函數內的button或container變量。 有什么問題？

var Site = {
    init: function () {
        $(".site .head .nav-bar .nav-button").click(function () {
            Site.Navigation.toggle();
            return false;
        });
    },
    Navigation: {
        container: $(".site .head .nav-bar .navigation"),
        button: $(".site .head .nav-bar .nav-button"),
        toggle: function () {
            if (this.button.hasClass("active")) {
                this.hide();
            }
            else {
                this.show();
            }
        },
        show: function () {
            this.button.addClass("active");
            this.container.slideDown();
            return false;
        },
        hide: function () {
            this.button.removeClass("active");
            this.container.slideUp();
            return false;
        }
        //another stuff
    }

}

$(document).ready(function () {
    Site.init();
});

Answer 1

我不是很確定，但我相信正在發生的事情是你的選擇器不匹配任何元素，因為它們是在元素添加到DOM之前調用的。 我是說這些：

container: $(".site .head .nav-bar .navigation"),
button: $(".site .head .nav-bar .nav-button"),

嘗試將整個JavaScript移動到正文的末尾（就在</body>之前）。

另一種可能的解決方案是僅從Site.init填充這些屬性（當前，在聲明對象文字時立即填充它們：

var Site = {
    init: function () {

        this.Navigation.container = $(".site .head .nav-bar .navigation");
        this.Navigation.button = $(".site .head .nav-bar .nav-button");

        $(".site .head .nav-bar .nav-button").click(function () {
            Site.Navigation.toggle();
            return false;
        });
    },
    Navigation: {
        container: null,
        button: null,
        toggle: function () {
            if (this.button.hasClass("active")) {
                this.hide();
            }
            else {
                this.show();
            }
        },
        show: function () {
            this.button.addClass("active");
            this.container.slideDown();
            return false;
        },
        hide: function () {
            this.button.removeClass("active");
            this.container.slideUp();
            return false;
        }
        //another stuff
    }

}

Answer 2

這是因為當你的對象被定義時，你的元素可能還不存在，因為在DOM准備好之后代碼沒有運行。

您可以修改Site.init函數以接受這些元素引用作為參數。

   init: function (container, button) {
        var nav = this.Navigation;

        nav.container = container;
        nav.button = button;
    }

然后傳遞元素：

$(document).ready(function () {
    Site.init(/*containerEl*/, /*buttonEl*/);
});