时间戳

首页 > 解决方案 > 如何更有效地编写 else if 语句？

javascript - 如何更有效地编写 else if 语句？

问题描述

我有一个带有一些 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';
}

标签： javascriptif-statement

解决方案

您实际上是将您currentImpactState的 ID 映射到 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'

推荐阅读