about button.addEventListener

Question

如果大约有10个按钮，按钮编号从1到10，如果单击按钮1，则创建对象1。如果单击按钮2，则创建对象2，删除剩余的对象1、3和4。在目前的情况下，它是通过硬编码实现的，但我希望保持代码简洁。帮助。

这是我的代码

document.getElementById("leg_type2").addEventListener("click",
function() {
Group1.children[1].visible = !Group1.children[1].visible;
Group1.children[0].visible = false;
Group1.children[2].visible = false;
Group1.children[0].scale.set(0, 0, 0)
Group1.children[1].scale.set(1, 1, 1)
Group1.children[2].scale.set(0, 0, 0)
});
document.getElementById("leg_type3").addEventListener("click",
function() {
Group1.children[2].visible = !Group1.children[2].visible;
Group1.children[1].visible = false;
Group1.children[0].visible = false;
Group1.children[0].scale.set(0, 0, 0)
Group1.children[1].scale.set(0, 0, 0)
Group1.children[2].scale.set(1, 1, 1)
});

Answer 1

您可以创建一个函数来为您完成这项工作:

document.getElementById("leg_type2")
.addEventListener("click", function () { toggle(2); });
document.getElementById("leg_type3")
.addEventListener("click", function () { toggle(3); });
function toggle(index) {
const { children } = Group1;
for (let i = 0; i < children.length; i++) {
if (i !== index) {
children[i].visible = false;
children[i].scale.set(0,0,0);
}
}
children[index].visible = true;
children[index].scale.set(1, 1, 1);
}