Question

我正在尝试使用多种方法，但它在我的控制台中引发错误。这是我的代码：

var Amber = {
    Notification: function (type) {
         this.message = null;
         this.box = null;

         switch(type) {
              case 'bad':
                   this.box = '<div class="Notification bad><i class="icon-notok"></i>' + this.message + '</div>';
              break;

              case 'good':
                   this.box = '<div class="Notification good><i class="icon-ok"></i>' + this.message + '</div>';
              break;

              case 'informative':
                   this.box = '<div class="Notification informative><i class="icon-informative"></i>' + this.message + '</div>';
              break;

              case 'warning':
                   this.box = '<div class="Notification warning><i class="icon-warning"></i>' + this.message + '</div>';
              break;
         }

         this.SetMessage = function (message) {
              this.message = message;
         }

         this.Show = function () {
              this.box.appendTo(document.body);
         }
    },

    new Amber.Notification('bad').SetMessage('lol').Show();

在Mozilla Firefox中，我收到此错误：

TypeError: (intermediate value).SetMessage(...) is undefined

有谁知道为什么会这样？提前谢谢！

Answer 1

你必须从函数调用中返回this来链接它们，否则你将返回undefined并尝试调用未定义的函数

     this.SetMessage = function (message) {
          this.message = message;
          return this;
     }

     this.Show = function () {
          this.box.appendTo(document.body);
          return this;
     }

appendTo是一个jQuery函数。现在你的box只是一个字符串。要使它成为一个选择器，你可以做

this.box = $('<div class="Notification bad><i class="icon-notok"></i>' + this.message + '</div>');

然后你应该可以致电appendTo。使用$作为选择器的变量前缀是一个有用的约定。这很好，因为它表明变量是一个选择器

this.$box = $('<div class="Notification bad><i class="icon-notok"></i>' + this.message + '</div>');
...
this.Show = function () {
    this.$box.appendTo(document.body);
    return this;
}

几个实习方法错误

1 个答案: