Recently, I've come up with some code to handle fading in and out certain divs depending on the amount of check boxes that have been checked by a user.
While it functions and serves it's purpose I am wondering if anyone has feedback to see if this could be converted into a way that uses switch/case block which may be a better approach rather than having too many if/else statements? Does anyone have input on how to write this function shorter?
$('input:checkbox').change(function() {
var boxChecked = $('input:checkbox:checked').length;
if (boxChecked == 11) {
$('.column-3').fadeTo(500, 1.0);
$('.column-1, .column-2').fadeTo(500, 0.4);
}
if (boxChecked == 10) {
$('.column-2').fadeTo(500, 1.0);
$('.column-1, .column-3').fadeTo(500, 0.4);
}
else if (boxChecked == 6) {
$('.column-2').fadeTo(500, 1.0);
$('.column-1, .column-3').fadeTo(500, 0.4);
}
else if (boxChecked == 5) {
$('.column-1').fadeTo(500, 1.0);
$('.column-2, .column-3').fadeTo(500, 0.4);
}
else if (boxChecked < 5) {
$('.column-2, .column-3').fadeTo(500, 1.0);
}
});
$('input:checkbox').change(function () {
var boxChecked = $('input:checkbox:checked').length;
switch (boxChecked) {
case 11:
$('.column-3').fadeTo(500, 1.0);
$('.column-1, .column-2').fadeTo(500, 0.4);
break;
case 10:
$('.column-2').fadeTo(500, 1.0);
$('.column-1, .column-3').fadeTo(500, 0.4);
break;
case 6:
$('.column-2').fadeTo(500, 1.0);
$('.column-1, .column-3').fadeTo(500, 0.4);
break;
case 5:
$('.column-1').fadeTo(500, 1.0);
$('.column-2, .column-3').fadeTo(500, 0.4);
break;
case (boxChecked < 5):
$('.column-2, .column-3').fadeTo(500, 1.0);
break;
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.