javascript - Javascript - 将参数函数传递给异步 onchange 事件
问题描述
晚上好,我在 Javascript 中构造表单时遇到问题。为了避免重复代码,我想使用相同的功能:
function addCheckBoxItem(p, name, value) {
// add checkbox
var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.setAttribute("value", p);
newCheckbox.setAttribute("id", p);
newCheckbox.setAttribute("name", name);
newCheckbox.onchange = function(){
var cbs = document.getElementsByName(name);
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
this.checked = true;
// define the peer selected as choice
value = this.value;
// TODO: MY PROBLEM IS HERE
};
form.appendChild(newCheckbox);
// add label to checkbox
var label = document.createElement('label');
label.setAttribute("name", name);
label.htmlFor = p;
label.appendChild(document.createTextNode(p));
form.appendChild(label);
// add br tag to checkbox
var br = document.createElement("br")
br.setAttribute("name", name);
form.appendChild(br);
}
我在循环中调用我的函数
for (i = 0; i < array.length; i++) {
addCheckBoxItem(array[i].key, nameItemCheckbox, peer_choice);
}
我知道这value = this.value
是不可能的,因为onchange
事件是异步的,但我想检索此事件的值并将其与我的参数相关联。我对这个问题有不同的反应。其中之一是:为什么我的变量在我在函数内部修改后没有改变?- 异步代码参考我已经了解基本概念,但没有一个示例与我的问题相关。有人可以帮助我吗?
编辑 - 解决方案
感谢@Tibrogargan,我以这种方式修改了我的功能:
for (i = 0; i < array.length; i++) {
addCheckBoxItem(form, array[i].key, form_peer_available_class, peer_choice, (value) => peer_choice = value);
}
和
function addCheckBoxItem(p, name, value, callback) {
// add checkbox
var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.setAttribute("value", p);
newCheckbox.setAttribute("id", p);
newCheckbox.setAttribute("name", name);
newCheckbox.onchange = function(){
var cbs = document.getElementsByName(name);
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
this.checked = true;
// define the peer selected as choice
callback(this.value);
};
form.appendChild(newCheckbox);
// add label to checkbox
var label = document.createElement('label');
label.setAttribute("name", name);
label.htmlFor = p;
label.appendChild(document.createTextNode(p));
form.appendChild(label);
// add br tag to checkbox
var br = document.createElement("br")
br.setAttribute("name", name);
form.appendChild(br);
}
解决方案
addCheckBoxItem
像这样传递回调
// accumulator
var data = {}
// callback
var storeData = (name, value, p) => data[name] = value;
// callback as third argument
addCheckBoxItem('data1', 'checkbox1', storeData);
addCheckBoxItem('data2', 'checkbox2', storeData);
addCheckBoxItem('data3', 'checkbox3', storeData);
在此处查看完整示例http://jsfiddle.net/gtqnc109/9/
推荐阅读
- r - 计算平均发动机预期寿命之间的比率
- css - 我正在研究 React,当用户使用 useState Hook 单击此图标时,我想在 Ionicon Icon 上填充红色
- python - 来自两个不同 csv 文件的 Python 模糊查找(模糊匹配)
- c# - Postsharp:未安装请求的目标包 NETStandard.Library.Ref
- php - 如何从 WooCommerce 订单中获取计费自定义字段
- reactjs - 为什么 setInterval 函数不能正常工作?
- c - 宏详细度定义
- sql - 如何在 SQL 查询的结果中添加空白列?
- json - 使用 powershell 将所有项目的 Azure DevOps rest api 测试计划转换为 csv 文件
- php - 金额总和未显示 仅显示最后金额 ?? PHP Laravel