![](/img/trans.png)
[英]How to simplify multiple if else conditions in JavaScript - React JS
[英]How to simplify JavaScript/React
我想简化以下代码:
(如您所见,我有很多document.getElementById
)
clickText() {
document.getElementById("choiceInput").style.display = "none";
document.getElementById("dateInput").style.display = "none";
document.getElementById("textInput").style.display = "block";
document.getElementById('buttonFont').classList.remove('buttonUnselectAfterClick');
document.getElementById('buttonFont').classList.add('buttonSelectAfterClick');
document.getElementById('buttonCalendar').classList.remove('buttonSelectAfterClick');
document.getElementById('buttonCalendar').classList.add('buttonUnselectAfterClick');
document.getElementById('buttonBoolean').classList.remove('buttonSelectAfterClick');
document.getElementById('buttonBoolean').classList.add('buttonUnselectAfterClick');
}
另外,我正在使用reactjs。
您可以使用Map,Set和for ... of循环将它们分组来简化代码,并且不需要库和框架:
const displayList = new Map([['choiceInput', 'none'], ['dateInput', 'none'], ['textInput', 'block']]);
const eventList = new Set(['buttonFont', 'buttonCalendar', 'buttonBoolean']);
clickText() {
// For display attr
for([key, val] of displayList) {
document.getElementById(key).style.display = val;
}
// For events
for(item of eventList) {
document.getElementById(item).classList.remove('buttonUnselectAfterClick');
document.getElementById(item).classList.add('buttonUnselectAfterClick');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.