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设置。