更新函数中对象的属性，然后使对象在函数之外可访问
我希望你能帮我解决这个问题，因为我在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回答 1
Stack Overflow用户
发布于 2019-01-04 20:40:57
您的代码正在工作，但在您有机会进行更改之前，您的最后一条console.log语句正在触发。基本上，从呈现引擎的角度来看，页面加载和以下事件发生在毫秒内：
- 你
console.logtenantObject - 在
#WeWorkCheckbox上设置事件侦听器，等待更改 - 你又来了
console.logtenantObject
很长一段时间后，从浏览器的角度来看--至少几百毫秒--一个更改事件在上触发，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>https://stackoverflow.com/questions/54045176
复制相似问题
腾讯云开发者
