简体   繁体   中英

Fading Divs Based On Checked-boxes Count

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM