如果语句更有效,我该如何写呢?

时间:2018-07-30 00:46:41

标签: javascript if-statement

我的页面上有一些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';
}

3 个答案:

答案 0 :(得分:5)

您实际上是将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'

答案 1 :(得分:2)

提取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';
});

答案 2 :(得分:2)

这是一个简单的改进示例。

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';
}