0

したがって、0〜100％を計算したい場合は期待どおりに機能するJSがありますが、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;

fields.length入力が 6 つあるため、 は 6 です。

ボタンのfields.filter(function () { return $.trim(this.value) != ""; }).length魔女にすでに2つの値があるため、最初の値3で返されます。

それはあなた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 に答える