day-6.3 判断控制语句三目运算写法实例

一个通过点击事件控制盒子颜色的三目运算写法实例

原始的if判断写法

 1         <style>
 2             body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
 3             ol,ul,li{margin:0;padding:0;list-style:none;}
 4             img{border:none;}
 5             #wrap {
 6                 width:200px;
 7                 height:200px;
 8             }
 9             #wrap.red {
10                 background-color:red;
11             }
12             #wrap.pink{
13                 background-color:pink;
14             }
15         
16         </style>
17     </head>
18     <body>
19         <div id="wrap" class="red"></div>
20         
21         <script>
22             var oWrap = document.getElementById("wrap");
23             //console.log(oWrap);
24             var a = true;
25             oWrap.onclick = function () {
26                 a = !a;
27                 if (a){     //注意if判断一定要写在事件里面，事件触发的时候只会重新执行事件里面的代码块，如果if判断放在外面，则不会因为事件触发而重新执行。
28                     oWrap.className = "red";
29                 }else {
30                     oWrap.className = "pink";
31                 }
32             };
33         </script>
34     </body>

我们发现if判断满足三目写法的条件：

1、if判断结构只有 if 和 else层。

2、条件语句和代码块都只有一个表达式

所以可以将事件函数里的代码块进行三目改写，

改写后。

1 oWrap.onclick = function () {
2                 a = !a;
3                 a ? oWrap.className="red":oWrap.className="pink";
4             };

 

这样算基本改写完了，但是三目写法为什么叫三目运算，

我们知道运算符一般都是一个返回赋值的运算表达式，而这里只是一个逻辑判断，而并没有具备运算的特性。

这是因为上述三目改写还不是三目运算写法的最终格式；

所以进行下一步最终改写，即：

1 oWrap.onclick = function () {
2                 a = !a;
3                 oWrap.className=a ?"red":"pink";
4             };

这才是最终的三目运算写法，通过对a的条件判断，完成对oWrap.className这个属性的赋值。

 

posted @ 2018-05-26 01:16  bibiguo  阅读(520)  评论(0)    收藏  举报