gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 19:55:29 25 4
gpt4 key购买 nike

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

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

基本上,我想将那个“租户”对象(其默认值会将“状态”设置为“真”)传递给多个可以更新该对象的复选框监听器。所以我想我的问题是如何让更新后的对象可以在复选框功能之外访问。下面的代码。提前致谢!

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

最佳答案

您的代码正在运行,但在您有机会进行更改之前,您的最终 console.log 语句已触发。基本上,从渲染引擎的 Angular 来看,页面加载后,以下事件会在几毫秒内发生:

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

非常之后,从浏览器的 Angular 来看——至少几百毫秒——一个更改事件在 #WeWorkCheckbox 上触发, 的值tenantObject.Tenants[0].Status 更改为 falsetenantObject.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>

关于javascript - 在函数内更新对象的属性,然后使对象在函数外可访问,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54045176/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com