javascript - 在 javascript/jQuery 中动态更改元素的属性

Question

假设我有这样一个元素:

var myElem='<div class="oldClass" style="color:green;" id="oldId"><span>This DIV has some 
innerHTML as well</span></div>'

还有一个像这样的 JSON:

var myJson = {
    "class": "myClass",
    "id": "myId",
    "style": "border: 1px solid black; color: red; font-size:20px;"
};

现在我需要用 JSON 格式的数据更新 myElem。

我尝试的是:

for(var key in myJson){
    var attrName = key;
    var attrValue = myJson[key];
    console.log('attrName ', attrName);
    console.log('attrValue ', attrValue);
    $(myElem).removeAttr(attrName);
    $(myElem).attr(attrName, attrValue);
}

我对这段代码的期望:

myElem = '<div class="myClass" style="border: 1px solid black; color: red; font-size:20px;" id="myId"><span>This DIV has some innerHTML as well</span></div>'

但是，这是行不通的。myElem 保持原来的状态。
myElem 和 myJson 都是动态的而不是静态的
谁能告诉我我做错了什么？ (我知道我做错了什么，但我找不到它)!

Answer 1

您可以将整个 myJson 对象传递给 attr 而不必使用循环:

var myElem = '<div class="myClass" style="border: 1px solid black; color: red; font-size:20px;" id="myId"><span>This DIV has some innerHTML as well</span></div>';
var myJson = {
    "class": "myClass",
    "id": "myId",
    "style": "border: 1px solid black; color: red; font-size:20px;"
};

var elem = $(myElem).attr(myJson);

但是如果你愿意，它甚至可以在一个循环中。我不知道你为什么想要，但这是可能的。只需在循环外定义您的元素即可:

var elem = $(myElem);

for( var key in myJson ) {
    if( myJson.hasOwnProperty(key) ) {
        elem.attr(key, myJson[key]);
    }
}