jquery ui具有默認值和最大值的多個滑塊

Question

我想創建一個頁面，讓人們可以給幾個興趣點。

最多有50個積分，我想用幾個滑塊進行分佈。因爲它保存在數據庫中，所以每個興趣都會有一個默認值。

已經在網上發現了很多，並且在^ @^##小時後仍然不起作用。如果我給一個滑塊（默認）的值，其餘的不再工作。我嘗試了很多東西，但現在我真的不知道了。

我該怎麼做？或者這將無法與我的代碼一起工作？我仍然在學習:(

HTML

 <p>total available points 50 </p> 
    <div id="sliders"> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="0" /> 
     </div> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="0" /> 
     </div> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="7" /> 
     </div> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="0" /> 
     </div> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="0" /> 
     </div> 
     <div> 
     <div class="slider"></div> 
     <input type="text" class="value" value="0" /> 
     </div> 
    </div> 
<div class="slider"></div> 

的JavaScript如果ID添加在的遊戲內所有的滑塊都設置了功能

  $(window).load(function(){ 

     var sliders = $("#sliders .slider"); 
     var availableTotal = 50; 

     sliders.each(function() { 

      $(this).empty().slider({ 

      value: 0, 
       min: 0, 
       max: 50, 
       range: "max", 
       step: 1, 
       animate: 100,  
       create: function() { 
        $(this).slider("option", "value", $(this).next().val()); 
       },   
       slide: function(event, ui) { 

        // Get current total 
        var total = 0; 

        sliders.not(this).each(function() { 
         total += $(this).slider("option", "value"); 
        });  

        var max = availableTotal - total;    

        if (max - ui.value >= 0) { 
         // Need to do this because apparently jQ UI 
         // does not update value until this event completes 
         total += ui.value; 
        // console.log(max-ui.value); 
         $(this).siblings().val(ui.value); 

        } else { 
         return false; 
        } 


        //get total sum of all points 
        var sum = 0; 
        $(".value").each(function(){ 
         sum += +$(this).val(); 
        }); 
        $(".total").text(sum); 

       } 
      }); 
     }); 
     }); 

JS fiddle

Answer 1

將它的工作呢？輸入框的值將由php設置。