当我更改下拉菜单的选项时,我希望取消选中所有复选框。这是我在下拉菜单更改时调用的函数内的代码:
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
确实取消选中该复选框。但是,要重新检查复选框,需要两次单击。似乎dat.gui仍然认为复选框已被选中,因此只需点击一下即可取消选中它,再检查一次。
如何让dat.gui更新复选框?
修改:这是问题的当前状态。
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui.add(menu, 'This is an example').onFinishChange(
function(value) {console.log('example');} ).listen();
menu['This is an example'] = false;
使用此代码,由于.listen()调用并将变量设置为false,因此取消选中该复选框。但是,仍然需要两次点击才能显示支票 - 一到#34;取消选中&#34;复选框,以及一个检查它。
答案 0 :(得分:1)
首先通过告诉dat.gui听取你需要绑定的值来设置数据绑定,方法是在.listen()
之后加入.add()
gui = new dat.GUI;
controllers = [];
var menu = {
'This is an example': false,
}
controllers[0] = gui
.add(menu, 'This is an example')
.listen()
.onFinishChange(
function(value) {
console.log('example');
}
);
然后通过复选框将dat.gui控制的变量设置为false。
menu['This is an example'] = false;
有关dat.gui详情的更多信息:http://dat-gui.googlecode.com/git-history/561b4a1411ed13b37be8ff974174d46b1c09e843/index.html
答案 1 :(得分:1)
我最近遇到了同样的问题,因为必须单击两次复选框才能获得正确的行为,所以这里有什么对我有用,并希望能让其他读者免受几分钟的伤害:
// the usual
var menu = { "foo":false };
// store this reference somewhere reasonable or just look it up in
// __controllers or __folders like other examples show
var o = menu.add(menu, "foo").onChange(function() { });
// some later time you manually update
o.updateDisplay();
o.__prev = o.__checkbox.checked;