2

希望有人能指出我正确的方向。

我对 OOP 并不陌生，但我不熟悉它在 Javascript 中的工作方式。我理解 js 中的类是对象的概念。

我正在编写一个脚本，它将编写一些 html 并允许用户添加或删除一些元素。一切正常，除了当您单击任何实例的“添加复选框”时，html 在最后一个实例中更新，而不是它本身（这让我相信存在某种范围界定或封装失败）。

我已经简化了问题并发布了一个小提琴，单击“颜色”实例的“添加复选框”，您会看到 html 被添加到“动物”组中。注意我在第 25 行的 js 评论。

http://jsfiddle.net/XrJ3D/

var CheckboxGroup = function(label){
  return this.init(label);
}
CheckboxGroup.prototype = {
  type: "checkbox",
  label: null,      
  description: null,
  $label: null,              
  init: function(label){
    if(!label) label = "Checkboxes";
    self = this;         
    this.$wrap = $("<div class='checkBoxGroup'></div>");
    this.$label = $("<div>"+label+"</div>").appendTo(this.$wrap);
    this.$options = $("<div></div>").appendTo(this.$wrap); 
    this.$add = $("<div class='n'>Add Checkbox</div>").appendTo(this.$wrap);

    this.$add.click(function(){          
      self.addOption("New Option");
    });

    this.options = [];       
    return this;          
  },
  addOption: function(label){
    $option = $("<div class='c'><input type='checkbox' name='"+label+"'><span class='l'>"+label+"</span></div>").appendTo(this.$options);

    $remove = $("<span class='rm'>x</span>").appendTo($option);        
    $remove.click(function(){
      var r=confirm("Remove Option?");
      if (r==false) return;                    
      $(this).parents('.c').remove();
    });
    this.options.push($option);
    return $option;
  },
  get: function(){
    return this.$wrap;
  }
}

// === CREATE SOME INSTANCES ===

a = new CheckboxGroup("Colors");
a.addOption('red');
a.addOption('green');
a.addOption('blue');    

$('body').append(a.get());

b = new CheckboxGroup("Animals");
b.addOption('dog');
b.addOption('cat');

$('body').append(b.get());

感谢您的任何见解。

4

2 回答 2

5

您的self变量是全局变量，将被最后初始化的对象覆盖：

self = this;

在它之前添加var以使其成为您的init函数的本地：

var self = this;

演示：http: //jsfiddle.net/XrJ3D/5/

于 2013-02-25T00:48:34.080 回答
0

除了 Blender 明显正确的答案外，您可能还需要解决其他几件事：

  • `init 函数的第一行可能应该是

    this.label = label || "Checkboxes";

  • 您的构造函数或函数无需init返回任何内容。实际上，在构造函数之外这样做有点浪费。

于 2013-02-25T01:05:04.100 回答