0

我使用对象文字来收集我动态添加的各种 DOM 元素，因为我希望能够通过变量引用它们（下面的代码已简化，还有更多，比如事件等）：

ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990')
}

现在我希望我可以向其中添加其他对象，但它会引发错误：

ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990'),
  headerSpecial : $('<span>some header</span>').appendTo(ui.header) // this line will cause an error "ui is not defined"
}

我想这是因为在 ui 对象关闭之前，我还不能引用里面的任何东西。所以我必须将这些东西分成单独的对象。但是有什么方法可以让我在一个对象中做到这一切吗？我应该在匿名函数中包装一些东西然后调用它们吗？

4

2 回答 2

5

使用同一个对象来保存引用是没有问题的，但是不能在同一个字面表达式中使用自引用。分两步进行：

// create the object
ui = {
  header : $('<div id="header"></div>').appendTo('body').css('color','#009'),
  footer : $('<div id="footer"></div>').appendTo('body').css('color','#990')
}

// add a new property to the object
ui.headerSpecial = $('<span>some header</span>').appendTo(ui.header);
于 2013-04-11T22:13:40.093 回答
2

与其使用对象字面量，不如实例化一个匿名函数？

ui = new function () {
    this.header = $('<div id="header"></div>').appendTo('body').css('color','#009');
    this.footer = $('<div id="footer"></div>').appendTo('body').css('color','#990');
    this.headerSpecial = $('<span>some header</span>').appendTo(this.header);
};
于 2013-04-11T22:30:54.220 回答