2

誰かが私を正しい方向に向けることができることを願っています。

私はOOPに不慣れではありませんが、Javascriptでどのように機能するかについてはあまり詳しくありません。jsのクラスはオブジェクトであるという概念を理解しています。

いくつかのhtmlを記述し、ユーザーがいくつかの要素を追加または削除できるようにするスクリプトを書いています。いずれかのインスタンスの[チェックボックスの追加]をクリックした場合を除いて、すべてが正常に機能します。HTMLは、それ自体ではなく、最後のインスタンスで更新されます（これにより、ある種のスコープまたはカプセル化の失敗があると私は信じます）。

問題を単純化してフィドルを投稿しました。「colors」インスタンスの「AddCheckbox」をクリックすると、代わりにhtmlが「animals」グループに追加されていることがわかります。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 に答える