switch语句
CreateTime--2017年7月13日08:40:07
Author:Marydon
switch语句
参考链接:http://www.w3school.com.cn/js/pro_js_statements_switch.asp
switch 语句是 if 语句的兄弟语句。
一、switch语句介绍
语法:
switch (expression) case value: statement; break; case value: statement; break; case value: statement; break; case value: statement; break; ... case value: statement; break; default: statement;
说明:
每个情况(case)都是表示“如果 expression 等于 value,就执行 statement”。
关键字 break 会使代码跳出 switch 语句。如果没有关键字 break,代码执行就会继续进入下一个 case。
关键字 default 说明了表达式的结果不等于任何一种情况时的操作(事实上,它相对于 else 从句)。
switch 语句主要是为避免让开发者编写下面的代码:
if (i == 20) alert("20"); else if (i == 30) alert("30"); else if (i == 40) alert("40"); else alert("other");
等价的 switch 语句是这样的:
switch (i) { case 20: alert("20"); break; case 30: alert("30"); break; case 40: alert("40"); break; default: alert("other"); }
举例1:
CSS部分
/* 医嘱:长嘱,临嘱,中医样式显示 Start*/ .yz_td1 { line-height: 28px; height: 28px; padding-left: 10px; width: 100px; } /*灰色背景色*/ .yz_td2 { font-size: 14px; height: 28px; line-height: 28px; width: 100px; color: #333; margin: 4px; background: #e7e9e6; border-radius: 6px; text-align: center; } /*绿色背景色*/ .yz_td3 { font-size: 14px; height: 28px; line-height: 28px; width: 100px; color: #fff; margin: 4px; background: #42b012; border-radius: 6px; text-align: center; } /* End 医嘱:长嘱,临嘱,中医嘱样式显示*/
HTML部分
<table cellspacing="0" cellpadding="1" border="0" class="medical_table" width="100%" height="100%"> <tbody> <tr> <td class="yz_td1">查看医嘱</td> <td width="100"> <div class="yz_td3" onclick="ctrlYzTitle('yzOption1');" id="yzOption1">长嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="ctrlYzTitle('yzOption2');" id="yzOption2">临嘱</div> </td> <td width="100"> <div class="yz_td2" onclick="ctrlYzTitle('yzOption4');" id="yzOption3">中医</div> </td> <td></td><!-- 空td不要删除 --> </tr> </tbody> </table>
JS部分
/** * 控制医嘱类型显示内容 */ function ctrlYzTitle(senderId) { switch (senderId) { case 'yzOption1': document.getElementById('yzOption1').className = 'yz_td3'; document.getElementById('yzOption2').className = 'yz_td2'; document.getElementById('yzOption3').className = 'yz_td2'; break; case 'yzOption2': document.getElementById('yzOption2').className = 'yz_td3'; document.getElementById('yzOption1').className = 'yz_td2'; document.getElementById('yzOption3').className = 'yz_td2'; break; case 'yzOption3': document.getElementById('yzOption3').className = 'yz_td3'; document.getElementById('yzOption1').className = 'yz_td2'; document.getElementById('yzOption2').className = 'yz_td2'; break; default: break; } }
实现效果:选中变色
效果展示:
举例2:巧用break特性
switch (panelId) { case 'panel2':// 患者信息 case 'panel4':// 专家选择 if('0' == panelStatus) return; case 'panel3':// 病历信息 if('0' == panelStatus || '3' == panelStatus) return; }
二、ECMAScript 和 Java 中的 switch 语句
ECMAScript 和 Java 中的 switch 语句有两点不同:
在 ECMAScript 中,switch 语句可以用于字符串,而且能用不是常量的值。
举例:
var BLUE = "blue", RED = "red", GREEN = "green"; switch (sColor) { case BLUE: alert("Blue"); break; case RED: alert("Red"); break; case GREEN: alert("Green"); break; default: alert("Other"); }
解说:switch 语句用于字符串 sColor,声明 case 使用的是变量 BLUE、RED 和 GREEN,这在 ECMAScript 中是完全有效的。
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/7158634.html