我正在使用三个 js 中的复选框。我创建了一个用户控制面板,我在其中添加了复选框。我想要做的是当我点击任何一个复选框时,另一个复选框已经被选中应该取消选中前一个。所以任何人都可以告诉我如何做到这一点。
这是我为复选框编写的代码。
function addDatGui(){
var gui = new dat.GUI();
parameters = {
a:false,
b:false,
c:false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters,'a').name('Possitive Charge');
var neg1 = first.add(parameters,'b').name('Negative Charge');
var neu1 = first.add(parameters,'c').name('Neutral');
var second = gui.addFolder("Glass");
var pos2 = second.add(parameters,'a').name('Possitive Charge');
var neg2 = second.add(parameters,'b').name('Negative Charge');
var neu2 = second.add(parameters,'c').name('Neutral');
pos1.onChange(PCharge);
neg1.onChange(Ncharge);
neu1.onChange(NeCharge);
var show = gui.add(parameters,'a').name('Show Charge');
}
最佳答案
您可以为每个 Controller 设置 .listen()
并使用将所有参数设置为 false
的函数设置 .onChange()
并且然后你需要的参数为 true
:
var gui = new dat.GUI();
parameters = {
a: false,
b: false,
c: false
}
var first = gui.addFolder("Plastic");
var pos1 = first.add(parameters, 'a').name('Possitive Charge').listen().onChange(function(){setChecked("a")});
var neg1 = first.add(parameters, 'b').name('Negative Charge').listen().onChange(function(){setChecked("b")});
var neu1 = first.add(parameters, 'c').name('Neutral').listen().onChange(function(){setChecked("c")});
function setChecked( prop ){
for (let param in parameters){
parameters[param] = false;
}
parameters[prop] = true;
}
jsfiddle例子
PS 我只是不明白,当你想在两个不同的文件夹中使用相同的参数对象时,但这取决于你。
关于javascript - 带有 dat.gui 的单选按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44630700/