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

Stack Overflow用户

提问于 2019-01-04 11:50:49

回答 1查看 37关注 0票数 1

我希望你能帮我解决这个问题，因为我在javaScript方面还是个新手。

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

基本上，我想把这个'tenant‘对象(其默认设置为'status’设置为‘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

Stack Overflow用户

回答已采纳

发布于 2019-01-04 12:40:57

您的代码正在工作，但在您有机会进行更改之前，您的最后一条console.log语句正在触发。基本上，从呈现引擎的角度来看，页面加载和以下事件发生在毫秒内：

你console.log tenantObject
在#WeWorkCheckbox上设置事件侦听器，等待更改
你又来了console.log tenantObject

很长一段时间后，从浏览器的角度来看--至少几百毫秒--一个更改事件在上触发，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>