0

所以我有一些 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');
        }
    });
});

完整的代码和工作示例可以在这里找到：

4

2 回答 2

0

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

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

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

第fields.filter(function () { return $.trim(this.value) != ""; }).length一个值为 3 的返回值，因为您的按钮女巫中已经有 2 个值也被计算出来。

这给你带来3 / 6 = 0,5 * 75 = 37,5了价值38

我不确定您想要完成什么，但是将您的输入按钮更改为<button>标签，或从选择器中删除它们可能会对您有所帮助。

jsFiddle没有按钮和调试警报。

于 2012-10-19T10:26:25.083 回答
0

不确定您到底想要什么，但类似的东西似乎更好（代码中的更改注释）

$(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

于 2012-10-19T10:36:21.113 回答