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 属性。

在您的情况下，编译器负责查看fontSize对象的headerObj属性，但它找不到它并为您的对象创建新的属性。< / p>

＆＃13;

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');

＆＃13;

<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>

＆＃13;

Answer 2

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

您需要执行此操作才能将其添加到headerSection。

下

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

Answer 3

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

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

Answer 4

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

{
"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));
});

Answer 5

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

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

对象值未正确更新

5 个答案: