[英]How can I write this else if statement more efficiently?
我有一个带有一些css自定义按钮的页面,我希望当用户点击页面上的其他位置时,所选按钮会保持突出显示。 我可以得到我想写一个if / else语句来在选择一个按钮时分配一个类,如果没有选择但是它已经长时间啰嗦,我可以编写它以提高效率吗?
<input class="btn" id="moveIt_overall2" type="button" value="Overall" onclick="changeImpactState('impact_overall');"/>
<input class="btn" id="moveIt_customer" type="button" value="Customer" onclick="changeImpactState('impact_customer');" />
<input class="btn" id="moveIt_staff" type="button" value="Staff" onclick="changeImpactState('impact_staff');" />
<input class="btn" id="moveIt_strategic" type="button" value="Strategic" onclick="changeImpactState('impact_strategic');" />
var moveItOverall = document.getElementById('moveIt_overall2');
var moveItCustomer = document.getElementById('moveIt_customer');
var moveItStaff = document.getElementById('moveIt_staff');
var moveItStrategic = document.getElementById('moveIt_strategic');
if(currentImpactState == 'impact_overall'){
moveItOverall.className = 'btn-on';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_customer'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn-on';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_staff'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn-on';
moveItStrategic.className = 'btn';
}else if(currentImpactState == 'impact_strategic'){
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn-on';
}
您实际上是将currentImpactState
映射到DOM中的ID。 您可以显式制作此地图,然后使用它来查找要更改的对象。
const buttons = {
impact_overall: 'moveIt_overall2',
impact_customer: 'moveIt_customer',
impact_staff: 'moveIt_staff',
impact_strategic: 'moveIt_strategic'
}
// change everything
Object.values(buttons).forEach(id => document.getElementById(id).className = 'btn' )
// change the item currentImpactState indicates
document.getElementById(buttons[currentImpactState]).className = 'btn-on'
提取currentImpactState
字符串的第二部分,然后迭代ID数组,检查ID是否包含子字符串。 如果是,则设置为btn-on
,否则设置为btn
:
const substr = currentImpactState.slice(7);
['moveIt_overall2', 'moveIt_customer', 'moveIt_staff', 'moveIt_strategic'].forEach(id => {
const element = document.getElementById(id);
element.className = id.includes(substr)
? 'btn-on'
: 'btn';
});
这是一个简单的改进示例。
moveItOverall.className = 'btn';
moveItCustomer.className = 'btn';
moveItStaff.className = 'btn';
moveItStrategic.className = 'btn';
if(currentImpactState == 'impact_overall'){
moveItOverall.className = 'btn-on';
}else if(currentImpactState == 'impact_customer'){
moveItCustomer.className = 'btn-on';
}else if(currentImpactState == 'impact_staff'){
moveItStaff.className = 'btn-on';
}else if(currentImpactState == 'impact_strategic'){
moveItStrategic.className = 'btn-on';
}
更新
因为在早期版本的浏览器中不支持forEach
,所以将Mark Meyer的答案更改为简单的JavaScript,如下所示:
const buttons = {
impact_overall: 'moveIt_overall2',
impact_customer: 'moveIt_customer',
impact_staff: 'moveIt_staff',
impact_strategic: 'moveIt_strategic'
}
for(var key in buttons)
{
// if key equals currentImpactState
// then set className as btn-on
// else set to 'btn'
document.getElementById(buttons[key]).className = (currentImpactState == key)? 'btn-on' : 'btn';
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.