更新函数内对象的属性，然后使对象在函数外可访问

问题描述 投票：0回答：1

对于 JavaScript 来说，我还是个新手。

我的目标是创建一个对象，并让复选框能够根据是否选中来更新该对象的属性。我可以在单个复选框的“更改”侦听器函数中更新对象，但我希望能够将该更新后的对象传递回其他复选框侦听器函数。

基本上，我想将该“租户”对象（其默认情况下将“状态”设置为“true”）传递给可以更新该对象的多个复选框侦听器。所以我想我的问题是如何让更新的对象可以在复选框功能之外访问。

代码如下：

//Build 'tenant' object
var tenantObject = {
  "Tenants": [{
   "Name": "WeWork",
   "Status": true
  }, {
   "Name": "Regus",
   "Status": true
   }
]
 }

console.log(tenantObject)//Status is 'true'


//Tenant Checkboxes
    d3.selectAll("#WeWorkCheckbox").on("change", function() {
            var type = "WeWork"
            display = this.checked ? "inline" : "none";
            statusCheck = this.checked ? true : false
            if (statusCheck == false) {
                tenantObject.Tenants[0].Status = false
                console.log(tenantObject.Tenants)// This works - the WeWork item now reads 'false'
                return tenantObject.Tenants             
            } 
            });

console.log(tenantObject)//Status still reads 'true' for WeWork, I want this to reflect the update in the above function
javascript jquery object checkbox
1个回答
1
投票

您的代码正在运行，但在您有机会进行更改之前，您的最终 

console.log
语句已被触发。基本上，从渲染引擎的角度来看，页面加载，并且以下事件在几毫秒内发生：

  1. 你
    console.log
    tenantObject
  2. 您在 
    #WeWorkCheckbox
    上设置了一个事件监听器，等待更改
  3. 你又
    console.log
    tenantObject

非常很长一段时间后，从浏览器的角度来看（至少几百毫秒），

#WeWorkCheckbox
上会触发更改事件，
tenantObject.Tenants[0].Status
的值更改为
false
，并且记录
tenantObject.Tenants
到控制台。

为了证明您的代码正常工作，只需执行一个 

setTimeout
，在 5000 毫秒后调用不同的函数到 
console.log
tenantObject
。这应该让您有足够的时间在触发之前取消选中该复选框，然后当它触发时，
tenantObject.Tenants[0].Status
的新值将被记录到控制台在您的
.on
函数之外。

如下（我已将您的 

console.log
语句更改为仅显示 
tenantObject.Tenants[0].Status
，以便于在控制台中可视化）：

//Build 'tenant' object
var tenantObject = {
  "Tenants": [{
    "Name": "WeWork",
    "Status": true
  }, {
    "Name": "Regus",
    "Status": true
  }]
}

console.log(tenantObject.Tenants[0].Status) //Status is 'true'


//Tenant Checkboxes
d3.selectAll("#WeWorkCheckbox").on("change", function () {
  var type = "WeWork"
  display = this.checked ? "inline" : "none";
  statusCheck = this.checked ? true : false
  if (statusCheck == false) {
    tenantObject.Tenants[0].Status = false
    console.log(tenantObject.Tenants[0].Status) // This works - the WeWork item now reads 'false'
    return tenantObject.Tenants
  }
});

var showOff = function () {
  console.log(tenantObject.Tenants[0].Status);
}

setTimeout(showOff, 5000);

我不得不猜测你的 HTML，因为它没有提供，所以作为参考，这里是我使用的 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <form action="/" method="POST">
    <input type="checkbox" name="WeWorkCheckbox" id="WeWorkCheckbox" checked>
    <input type="checkbox" name="RegusCheckbox" id="RegusCheckbox" checked>
  </form>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="index.js" charset="utf-8"></script>
</body>

</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.