对象值未正确更新答案

【问题标题】：object value not being updated correctly对象值未正确更新
【发布时间】：2018-02-24 14:05:56
【问题描述】：

我有一个对象如下：

{
"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",
}

谁能告诉我我做错了什么。

【问题讨论】：

这里的headerObj 是什么？
@HimanshuUpadhyay headerObj 是我的对象，它完全按照我在问题中提到的方式从服务器返回给我
我已经回答了你的问题。
希望你得到解决方案@code。

标签： javascript jquery html object

【解决方案1】：

您应该更新headerSection fontSize 属性。

在您的情况下，编译器正在处理您的 headerObj 对象的 fontSize 属性，但它没有找到它并为您的对象创建一个新的属性。

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>

【讨论】：

抱歉，您是第一个回答的。

【解决方案2】：

我相信，在查看您的输出后，fontSize 属性被不正确地附加。

您需要这样做才能将其添加到headerSection 下。

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

【讨论】：

【解决方案3】：

好的，那么你只需要做一点改变。

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

【讨论】：

欢迎您。乐意效劳。你也可以接受答案。 TYIA

【解决方案4】：

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

您正在向 headerObj 添加一个值，而不是 headerObj.headerSection，正如您从 console.log 中看到的那样

【讨论】：

【解决方案5】：

您有一个嵌套对象。未嵌套的对象看起来像这样

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

相反，您有一个外部对象，其中一个名为“headerSection”的属性指向另一个对象。如果您不打算更改数据结构，则需要更改代码以访问内部属性。像这样的

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

【讨论】：