Question

最近，我提出了一些代码来处理淡入淡出某些div，具体取决于用户检查过的复选框数量。

虽然它的功能和服务的目的我想知道是否有人有反馈，看看是否可以转换为使用switch / case块的方式，这可能是一个更好的方法，而不是有太多的if / else语句？有没有人有关于如何更短地编写此函数的输入？

$('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);
        }
});

Answer 1

$('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;
    }
});

基于选中框计数的淡化Div

1 个答案: