jQuery滑塊與刷新後拖動輸入值

Question

我發現這個爐篦滑塊是4個滑塊共享100％的價值組合。問題在於它沒有選擇輸入值，但是每次刷新頁面時，它都會重置爲每個滑塊的25％。在他們確定滑塊旋鈕的位置之前，有人可以通過輸入滑塊拾取值來提供幫助。

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(); val = (val) ? val : 0;

，還可以使用在create方法，而不是initValue該值沒有必要爲if條件，你只需要無論是else子句中：

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

檢查這個fiddle