jQuery/Javascript基本对象属性

我试图创建一个名为

startPosition

的属性，然后将

top

属性指定为CSS中按钮的

top

值

以下是jQuery：

var morphObject = {

    button: $('button.morphButton'),
    container: $('div.morphContainer'),
    overlay: $('div.overlay'),
    content: $('h1.content, p.content'),

    startPosition: {
        top: morphObject.button.css('top')
        // top: 150,
        // left: '20%',
        // width: 200,
        // height: 70,
        // marginLeft: -100
    },

当然，还有更多，但这就是错误发生的地方。错误是：

[Error] TypeError: undefined is not an object (evaluating 'morphObject.button')

---

我该怎么做？谢谢。

JavaScript中的对象，就像许多其他编程语言一样，可以与现实生活中的对象进行比较。JavaScript中对象的概念可以通过现实生活中的有形对象来理解

---

在JavaScript中，对象是具有属性和类型的独立实体。例如，将其与杯子进行比较。杯子是一个具有属性的对象。杯子具有颜色、设计、重量、材质等。同样，JavaScript对象也可以具有定义其特征的属性。

morphObject

在调用

morphObject.button

时尚不存在

你可以把它移到外面：

var morphObject = {
    button: $('button.morphButton'),
    container: $('div.morphContainer'),
    overlay: $('div.overlay'),
    content: $('h1.content, p.content'),

    startPosition: { }
};

morphObject.startPosition.top = morphObject.button.css('top');

或者直接参考jQuery元素：

var morphObject = {
    button: $('button.morphButton'),
    container: $('div.morphContainer'),
    overlay: $('div.overlay'),
    content: $('h1.content, p.content'),

    startPosition: {
        top: $('button.morphButton').css('top')
    }
};

---

在您试图使用它（分配给

top

）时，

morphObject

未完全构造。可以完全定义对象，然后添加依赖于现有特性值的其他特性

i、 e

变量

---

您忘记在尝试使用时关闭

morphObject

（分配给

top

），

morphObject

未完全构造。只是一个问题，它为什么不存在？在对象关闭之前，可以在对象内的函数中引用按钮、容器、覆盖和内容。为什么现在不行？@George

$（'button.morphButton'）

已经存在，因为jQuery已经加载，所以您可以调用它。但是

morphObject

仅在您关闭它之后才存在（因此，如果您没有完成

morphObject

的声明，则无法调用

morphObject.button

）

morphObject = {
    button: $('button.morphButton'),
    container: $('div.morphContainer'),
    overlay: $('div.overlay'),
    content: $('h1.content, p.content'),
    ...
};

morphObject.startPosition: {
    top: morphObject.button.css('top')
    ...
};