ES6：创建 DOM 对象并获得访问权限

Question

我正在尝试使用 ES6 类创建一个 DOM 对象，但是当我需要更改我的实例时我阻塞了。

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" 没有添加到我的 DOM 对象中。 任何的想法 ？我想有类似指针或实例的问题，但我找不到解决方案。

非常感谢您的帮助！ 凡妮莎

Answer 1

getDOMContent 返回一个 string（在您创建的 div 上调用 html 并将图层的 clone 添加到其中的结果）。所以很自然地在layer上调用addClass 在将该字符串添加到DOM不会对您添加到DOM的内容产生任何影响，因为A）您添加了一个字符串，并且B）它是通过序列化层的 clone 创建的字符串。

您可能想先添加类，或者从getDOMContent 返回您的实际元素（或jQuery 对象），而不是字符串。但你需要做的不仅仅是这些，因为你也在克隆。