Question

所以我有一些JS可以按预期工作，当你想要计算0 - 100％然而当我想将它限制在50％ - 75％并且我改变第一个输入后退到38％然后工作到75关于这里发生了什么的任何想法？

$(document).ready(function () 
{
    // Ok, now setup the slider for the application process
    $('.application-progress').slider(
    {
        range: "min",
        min: 50,
        max: 100,
        value: 50,
        animate: true,
        slide: function (event, ui) 
        {
            $("#progress").html(ui.value + "%");
        },
        disabled: true
    });

    $("#progress").html($(".application-progress").slider("value") + "%");

    $(".step-container input, .step-container select").change(function () 
    {
        $('.progress-container').removeClass('completed');
        var fields = $(".step-container input, .step-container select");
        var percentage = 75 * fields.filter(function () 
        {
            return $.trim(this.value) != "";
        }).length / fields.length;

        var roundedPercentage = Math.round(percentage);

        $(".application-progress").slider("value", roundedPercentage);
        $("#progress").html(roundedPercentage + "%");

        if (roundedPercentage == 100) 
        {
            $('.progress-container').addClass('completed');
        }
    });
});

可以找到完整的代码和工作示例here：

Answer 1

我认为你的价值观并不像你期望的那样

    var fields = $(".step-container input, .step-container select");
            var percentage = 75 * fields.filter(function () {
                return $.trim(this.value) != "";
    }).length / fields.length;

fields.length为6，因为您有6个输入。

fields.filter(function () { return $.trim(this.value) != ""; }).length返回第一个值为3，因为您的按钮中已有2个值也可以使用。

这会让您3 / 6 = 0,5 * 75 = 37,5获得值38

我不想回答您想要完成的任务，但将输入按钮更改为<button>标签，或将其从选择器中删除可能对您有帮助。

jsFiddle没有按钮和调试警报。

Answer 2

不确定你想要什么，但是这样的东西似乎更好（代码中注释的更改）

$(document).ready(function() {
    var minval = 50; //you'll need them later, so global var.
    var maxval = 75; //idem
    // Ok, now setup the slider for the application process
    $('.application-progress').slider({
        range: "min",
        min: 0,
        max: 100,
        value: minval, //or a fixed value, as you want.
        animate: true,
        slide: function(event, ui) {
            $("#progress").html(ui.value + "%");
        },
        disabled: true
    });

    $("#progress").html($(".application-progress").slider("value") + "%");

    $(".step-container input, .step-container select").change(function() {
        $('.progress-container').removeClass('completed');
        var fields = $(".step-container input, .step-container select");
        var filled = fields.filter(function() {
            return $.trim(this.value) != "";
        }).length; //fileds "filled"

        var totalLength = fields.length; //all fields filled.
        var percentage = minval + ((maxval - minval) * filled / totalLength); //new calculation
        var roundedPercentage = Math.round(percentage);

        $(".application-progress").slider("value", roundedPercentage);
        $("#progress").html(roundedPercentage + "%");

        if (roundedPercentage == 100) { //roundedPercentage = max, not 100
            $('.progress-container').addClass('completed');
        }
    });
});

SqlFiddle

jQuery UI Slider最小值可以自行反转？

2 个答案: