javascript - 对象值未正确更新

Question

我有一个对象如下:

{
"headerSection": {
    "text": "Some Text",
    "color": "red",
    "fontSize": "12px",
    "backgroundColor": "#000",
    "textAlign": "left"
   }
}

我有一个下拉列表，用户可以选择不同的字体大小，即 14px, 16px .. 20px。在此下拉列表的更改事件中，我想更改上面对象中 fontSize 的值，为此我这样做:

$('#font-size-ddl').change(function () {
    var value = $(this).val();
    headerObj.fontSize = value;
    console.log(JSON.stringify(headerObj));
});

在上面的 console.log 中，输出是:

{
"headerSection": {
    "text": "Some Text",
    "color": "red",
    "fontSize": "12px",
    "backgroundColor": "#000",
    "textAlign": "left"
 },
"fontSize": "20px",
}   

有人可以告诉我我做错了什么吗？

Answer 1

您应该更新 headerSection fontSize 属性。

在你的例子中，编译器正在寻找你的 headerObj 对象的 fontSize 属性，它没有找到它并为创建一个新的 property你的对象。

let headerObj={
"headerSection": {
    "text": "Some Text",
    "color": "red",
    "fontSize": "12px",
    "backgroundColor": "#000",
    "textAlign": "left"
   }
}

$('select').change(function () {
    var value = $(this).val();
    headerObj.headerSection.fontSize = value;
    console.log(JSON.stringify(headerObj));
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value="20px">20px</option>
  <option value="30px">30px</option>
</select>