为什么无法访问分配了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*/);
});