切换案例不会在更改事件中触发

Question

我正在尝试制作动态滑块，根据滑动的值改变背景颜色。我使用简单的switch-case进行此操作，但似乎没有输入此声明。

也可以在http://jsfiddle.net/3pLUX/1/

上找到实施方案

$(document).ready(function() {
    var change_var = $('#slider_pain').val();
    $('#slider_pain').bind('change', function () {
        if (change_var !== $(this).val()) {
            change_var = $('#slider_pain').val();
            console.log(change_var);
            switch(change_var) {
                case 1:
                    break;
                case 2: 
                    console.log("#2");
                    break;
                case 3:
                    break;
                case 4:
                    break;
                case 5:
                    break;
                case 6:
                    break;
                case 7:
                    break;
                case 8:
                    break;
                case 9:
                    break;
                case 10:
                    break;
                default:
            }
    }});
});    

Answer 1

change_var包含字符串值。并且您的case语句会查找数字匹配。

改为使用switch(parseInt(change_var, 10)) {。

switch(parseInt(change_var, 10)) {
case 1: break;
...
}

<强> Updated fiddle

Answer 2

$(document).ready(function() {
    var change_var = $('#slider_pain').val();
    $('#slider_pain').bind('change', function () {
        if (change_var !== $(this).val()) {
            change_var = $('#slider_pain').val();
            console.log(change_var);
            switch(change_var) {
                case '1':
                    break;
                case '2': 
                    console.log("#2");
                    break;
                case '3':
                    break;
                case '4':
                    break;
                case '5':
                    break;
                case '6':
                    break;
                case '7':
                    break;
                case '8':
                    break;
                case '9':
                    break;
                case '10':
                    break;
                default:
            }
    }});
});   

change_var是字符串

Answer 3

切换条件和后续情况下的参数类型应该相同，在您的情况下它们是不同的。请在下面使用。

$(document).ready(function() {
    var change_var = $('#slider_pain').val();
    $('#slider_pain').bind('change', function () {
        if (change_var !== $(this).val()) {
            change_var = $('#slider_pain').val();
            console.log(change_var);
            switch(parseInt(change_var)) {
                case 1:
                    break;
                case 2: 
                    console.log("#2");
                    break;
                case 3:
                    break;
                case 4:
                    break;
                case 5:
                    break;
                case 6:
                    break;
                case 7:
                    break;
                case 8:
                    break;
                case 9:
                    break;
                case 10:
                    break;
                default:
            }
    }});
});