Ternary Operators
How to use Ternary Operators
by wirey00
HTML
<div id='container'>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
div {
height:50px;
width: 50px;
background-color: red;
margin: 3px 3px 3px 3px;
float:left;
}
#container {
width: 600px;
height auto;
background-color: white;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.lightblue {
background-color: lightblue;
}
.orange {
background-color: orange;
}
.purple {
background-color: purple;
}
JavaScript
var colors = ['green', 'blue', 'lightblue', 'orange', 'purple'];
var fun = setInterval(function () {
$('#container div').each(function (i, v) {
var el = $(this);
(function (ii) {
console.log(Math.random() * 6);
el.switchClass(el.attr('class'), colors[Math.floor(Math.random()*6)], 2500);
})(i);
});
}, 2500);