ES6: DOM-Objekt erstellen und Zugriff erhalten

Question

Ich versuche, ein DOM-Objekt mit ES6-Klasse zu erstellen, aber ich blockiere, wenn ich meine Instanz ändern muss.

class Layer{ 
    constructor(layerIndex){ 
     this._layerId = "layer_"+layerIndex; 
     this.layer = $('<div id="'+this._layerId+'">'); 
     this.createLayerDiv(); 
    } 
    getDOMContent(){ 
     return jQuery('<div />').append(this.layer.eq(0).clone()).html(); 
    } 
    createLayerDiv(){ 
     var content = '<div class="row">text</div>'; 
     this.layer.append(content); 
     this.layer.addClass("oldClass"); 
    } 
    addClass(class){ 
     this.layer.addClass(class); 
    } 
} 

var layer = new Layer(0); 
$("body").append(layer.getDOMContent()); 
layer.addClass("newClass"); 

"newClass" wird nicht zu meinem DOM-Objekt hinzugefügt. Irgendeine Idee? Ich nehme an, es gibt so etwas wie Zeiger- oder Instanzprobleme, aber ich kann keine Lösung finden.

Vielen Dank für Ihre Hilfe! vanessa

Answer 1

getDOMContent Rückkehr ein String (das Ergebnis der html auf einem div rufen Sie einen Klon Ihre Ebene erstellen und hinzufügen). So natürlich addClass auf layernach Hinzufügen der Zeichenfolge zum DOM wird keinen Unterschied in was Sie hinzugefügt, um das DOM, weil A) Sie eine Zeichenfolge hinzugefügt, und B) Es war eine Zeichenfolge durch Serialisierung eines Klon erstellt Ihrer Ebene.

Wahrscheinlich möchten Sie entweder zuerst die Klasse hinzufügen oder Ihr aktuelles Element (oder jQuery-Objekt) aus getDOMContent, keine Zeichenfolge zurückgeben. Aber Sie müssen mehr als nur das ändern, da Sie auch klonen.