Use of ternary operators in js and js ternary Operators
The outer layer is false, which is determined step by step to the inner layer.
$ Scope. nums = 700;
$ Scope. result = ($ scope. nums> 300 )? ($ Scope. nums> 400 )? ($ Scope. nums> 500 )? ($ Scope. nums> 600 )? 'Airplane ': 'high-speed rail': 'auto': 'coach ': 'no ';
Console. log ($ scope. result );
Small Example of simple use of operators (switch button effect)
I. Page Structure
<Div id = "div1" class = "open1">
<Div id = "div2" class = "open2"> </div>
</Div>
Ii. Style
# Div1 {
Width: 170px;
Height: 100px;
Border-radius: 50px;
Position: relative;
}
# Div2 {
Width: 96px;
Height: 96px;
Border-radius: 48px;
Position: absolute;
Background: white;
Box-shadow: 0px 2px 4px rgba (0, 0, 0, 0.4 );
}
. Open1 {
Background: rgba (0,184, 0, 0.8 );
}
. Open2 {
Top: 1px;
Right: 0px;
}
. Close1 {
Background: rgba (255,255,255, 0.4 );
Border: 3px solid rgba (0, 0, 0, 0.15 );
Border-left: transparent;
}
. Close2 {
Left: 0px;
Top: 0px;
Border: 2px solid rgba (0.1, 0 );
}
Iii. Event Methods
Window. onload = function (){
Var div2 = document. getElementById ("div2 ");
Var div1 = document. getElementById ("div1 ");
Div2.onclick = function (){
Div1.className = (div1.className = "close1 ")? "Open1": "close1 ";
Div2.className = (div2.className = "close2 ")? "Open2": "close2 ";
}
}