Question

我希望您能为这个问题提供帮助，因为在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

Answer 1

您的代码正在运行，但是最后的console.log语句正在触发，您才有机会进行更改。基本上，从呈现引擎的角度来看，页面会加载，并且以下事件会在几毫秒内发生：

您console.log tenantObject
您在#WeWorkCheckbox上设置了一个事件监听器，等待更改
您再次console.log tenantObject

很长一段时间以后，从浏览器的角度来看-至少数百毫秒-#WeWorkCheckbox触发了change事件，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>

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

1 个答案: