Question

我一直试图让滑块显示控件旁边的当前值。本教程http://www.ryancoughlin.com/demos/interactive-slider/解释了如何轻松，轻松。

现在我试图设置3个连续的滑块并且工作正常但是IE正在为所有三个控件设置选项为默认值（0到100，步骤1，动画假...）。在FF和Chrome中工作正常。

我错过了什么？谢谢。

下面是代码：

        $('#slider-alpha').slider({
            range : false,
            value : 5,
            step: 1,
            animate: "true",
            min: 1,
            max : 10,


        });

    $('#slider-gamma').slider({
            range : false,
            value : 50,
            step: 10,
            animate: "true",
            min: 1,
            max : 200,

        });

    $('#slider-beta').slider({
            range : false,
            values : 50,
            step: 10,
            animate: "true",
            min: 1,
            max : 300,

        });




<script>
$(function() {

//alpha
var slide_int_alpha = null;
var slide_int_beta = null;
var slide_int_gamma = null;

function update_slider_alpha(){
    var value = $('#slider-alpha').slider('option', 'value');
        $('#alpha-value').text('No. of alpha: '+value);
        $('#alpha-value').fadeIn();
}

function update_slider_beta(){
    var valuet = $('#slider-beta').slider('option', 'value');
        $('#beta-value').text('No. of beta: '+valuet);
        $('#beta-value').fadeIn();
}

function update_slider_gamma(){
    var valuep = $('#slider-gamma').slider('option', 'value');
        $('#gamma-value').text('No. of gamma: '+valuep);
        $('#gamma-value').fadeIn();
}

$( "#slider-alpha" ).slider({
    start: function(event, ui){
    $('#alpha-value').empty();
        slide_int_alpha = setInterval(update_slider_alpha, 10); 
    },
    slide: function(event, ui) 
    { 
        setTimeout(update_slider_alpha, 10); 
    },
    stop: function(event, ui){
        clearInterval(slide_int_alpha);
        slide_int_alpha = null;
    }
});

$( "#slider-beta" ).slider({
    start: function(event, ui){
        $('#beta-value').empty();
            slide_int_beta = setInterval(update_slider_beta, 10);
        },
    slide: function(event, ui) 
        { 
            setTimeout(update_slider_beta, 10); 
        },
    stop: function(event, ui){
        clearInterval(slide_int_beta);
        slide_int_beta = null;
    }
});

$( "#slider-gamma" ).slider({
    start: function(event, ui){
        $('#gamma-value').empty();
            slide_int_gamma = setInterval(update_slider_gamma, 10);
        },
    slide: function(event, ui) 
        { 
            setTimeout(update_slider_gamma, 10); 
        },
    stop: function(event, ui){
        clearInterval(slide_int_gamma);
        slide_int_gamma = null;
    }
});


});

</script>





    <div id="alpha-value">No. of alpha: 5</div>
    <div id="slider-alpha" style="width: 90%;text-align: center;"></div>
    <br />

    <div id="beta-value">No. of beta: 20</div>
    <div id="slider-beta" style="width: 90%;text-align: center;"></div>
    <br />

    <div id="gamma-value">No. of gamma: 20</div>
    <div id="slider-gamma" style="width: 90%;text-align: center;"></div>
    <br />

Answer 1

虽然Firefox和Chrome正常处理它们，但Internet Explorer不喜欢对象，参数列表等中的trailing commas。

$('#slider-alpha').slider({
        range : false,
        value : 5,
        step: 1,
        animate: "true",
        min: 1,
        max : 10
    });

$('#slider-gamma').slider({
        range : false,
        value : 50,
        step: 10,
        animate: "true",
        min: 1,
        max : 200
    });

$('#slider-beta').slider({
        range : false,
        values : 50,
        step: 10,
        animate: "true",
        min: 1,
        max : 300
    });

JQueryUI滑块不适用于IE

1 个答案: