javascript - 刷新后拖动时带有输入值的 jQuery slider

Question

我发现这个格栅 slider 是 4 个共享 100% 值的 slider 的组合。问题是它不选择输入值，但每次刷新页面时每个 slider 都会重置为 25%。有人可以通过在确定 slider 旋钮的位置之前使 slider 选择输入值来提供帮助吗？

HTML

<div align="center" class="title">Statistiche:</div>
<div id="outer_container">
<div id="container">
<span class='multislider'>Hokuto ShinKen (<input type='text' required name='question_3' class='amount' value='5' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Nanto (<input type='text' required name='question_3' class='amount' value='15' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Gento (<input type='text' required name='question_3' class='amount' value='50' data-min='0' data-max='100'/>)
<div class='slider tied'>
</div>
Artiglio del Monte Taishan (<input type='text' required name='question_3' class='amount' value='30' data-min='0' data-max='100'/>)
<div class='slider tied'></div>
</span>
</div>
</div>

jQuery

    var init = true;
    var elements = $(".multislider").children(".slider.tied").length;
    var MAX = 100;
  var inpVal = $('.txt_name').val();
  var initValue = (inpVal) >> 0;
    //var initValue = (MAX / elements) >> 0;
    var InitMod = MAX % elements;

    $(".slider.tied").each(function() {
        var slidersTied = $(".slider.tied");
        var context = $(this);

        var input = context.prev(".amount");
        var val = input.data('answer');
        var min = input.data('min');
        var max = input.data('max');
        var range = 1;
        var proceed = false;

        $(this).empty().slider({
            value: val,
            min: min,
            max: max,
            range: range,
            animate: "slow",
            create: function(event, ui){

                if (InitMod > 0) {
                    $(this).slider('value', initValue + 1);
                    $(this).prev('.amount').val(initValue + 1);
                    InitMod = InitMod - 1;
                }
                else
                {
                    $(this).slider('value', initValue);
                    $(this).prev('.amount').val(initValue);
                }

            },
            slide: function(e, ui) {

                // Update display to current value
                $(this).prev('.amount').val(ui.value);

                var current = ($(this).index() / 2) >> 0;
                var total = 0;
                var counter = 0

                slidersTied.not(this).each(function() {

                    total += $(this).slider("option", "value");                
                    counter += 1;
                });

                total += ui.value;

                if (total != MAX){
                    proceed = true;
                }

                var missing = MAX - total;
                console.log("missing: " + missing);

                counter = 0;

                if(proceed) {

                    //carico vettore elementi
                    var elements = [];

                    slidersTied.each(function() {
                        elements[counter] = $(this);
                        counter += 1;
                    });

                    var endIndex = counter - 1;
                    counter = endIndex + 1;

                    while (missing != 0) {

                        console.log("current counter: " + counter);
                        do {
                            if (counter == 0) 
                            {
                                counter = endIndex;
                            }
                            else
                            {
                                counter = counter - 1;
                            }
                        } while(counter == current)

                        console.log("elemento attuale: " + counter);

                        var value = elements[counter].slider("option", "value");
                        var result = value + missing;

                        if (result >= 0) 
                        {
                            elements[counter].slider('value', result);
                            elements[counter].prev('.amount').val(result);

                            missing = 0;    
                        }
                        else
                        {
                            missing = result;
                            elements[counter].slider('value', 0);
                            elements[counter].prev('.amount').val(0);
                        }

                    }

                }

            }
        });
    });

例子 http://jsfiddle.net/vuQz5/116/

谢谢

Answer 1

有两个问题，var val = input.data('answer'); 是错误的，没有这样的数据值你需要的是像这样获取输入值:

var val = input.val(); 值 = (值) ?值:0；

并且还在 create 方法中使用该值而不是 initValue 不需要 if 条件你只需要 中的任何内容code>else 子句:

$(this).slider('value', val); $(this).prev('.amount').val(val);

检查这个fiddle