4

我无法在函数内访问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();
});
4

2 回答 2

4

我不确定，但我相信发生的事情是您的选择器不匹配任何元素，因为它们是在元素添加到 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
    }

}
于 2013-08-09T22:03:32.470 回答
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*/);
});
于 2013-08-09T22:08:44.820 回答