如何停止jQuery滑塊（酒吧）當點的範圍被清空

Question

我有一個jQuery-UI滑塊（http://jqueryui.com/demos/slider/#default）的問題。 我已經在我的網站上創建了其中的幾個，並且有「積分」（我進入1500）的DIV。增加後的每個滑塊都需要從DIV獲得點數，所以 - 當我將一個滑塊從0增加到100時，DIV左側只有1400個點。當我增加另一個滑塊時，DIV中的點數會減少。如果我減少其中一個滑塊，這些點將被添加到DIV - 這很好。 但是...我需要在DIV增益0（不能小於0的值）之後禁用增加滑塊的值，減少的值必須仍然可用（所以.slider（{disabled：true}）不是一個選項）。我已經試過幾乎所有的東西，並沒有什麼作品...

JS代碼：

$("#addMapPage").ready(function() { 

    $("#addMap").click(function(){ checkMap() }); 

    $(".vChanger").slider({ step: 10, 
          max: 1500, 
          slide: function(event, ui) { checkValues() }, 
          stop: function(event, ui) { checkValues() } 
          }); 
    checkValues(); 
}); 

function getValues() { 
    var data = new Array(); 
    data['water'] = $("#water").slider("value"); 
    data['steppe'] = $("#steppe").slider("value"); 
    data['swamp'] = $("#swamp").slider("value"); 
    data['desert'] = $("#desert").slider("value"); 
    data['forest'] = $("#forest").slider("value"); 
    data['mountain'] = $("#mountain").slider("value"); 
    data['hill'] = $("#hill").slider("value"); 
    return data; 
} 

function checkValues() { 
    var slidersValues = getValues();   //getting slider values 
    var sum = 0; 
    var pula = parseInt($("#pula").text());  //points to use (now can be less than 0) 

    if (pula < 0){ 
     $(".vChanger").slider({ range: pula }); 
    } 

    for (value in slidersValues) { 
     sum += slidersValues[value]; 
     $("#"+value+"Info").text(slidersValues[value]); 
    } 

    var pula = 1500-sum; 
    $("#pula").text(pula); 
} 

HTML：

<div id="addMapPage"> 
    <ul> 
     <li><span>Woda:</span><div class="vChanger" id="water"></div><span id="waterInfo"><span/></li> 
     <li><span>Step:</span><div class="vChanger" id="steppe"></div><span id="steppeInfo"><span/></li> 
     <li><span>Bagno:</span><div class="vChanger" id="swamp"></div><span id="swampInfo"><span/></li> 
     <li><span>Pustynia:</span><div class="vChanger" id="desert"></div><span id="desertInfo"><span/></li> 
     <li><span>Las:</span><div class="vChanger" id="forest"></div><span id="forestInfo"><span/></li> 
     <li><span>Góry:</span><div class="vChanger" id="mountain"></div><span id="mountainInfo"><span/></li> 
     <li><span>Wzgórza:</span><div class="vChanger" id="hill"></div><span id="hillInfo"><span/></li> 
     <li><span>Nazwa mapy:</span><input type="text" id="mapName"></input></li> 
    </ul> 
    <p id="mapInfo"><span id="pula"></span>Points to use</p> 
    <input type="button" id="addMap" value="create map"></INPUT> 
</div> 

這裏是例子（3個截圖）：

任何想法，如何限制點數（不要讓它們小於0）？

Answer 1

你會發現調整滑塊的最大值可能不是一個非常理想的解決方案。它將改變滑塊上增量的大小，而不是代表整個當前滑塊值代表的部分。相反，如果所有其他滑塊的當前總和加上此事件的值超過最大值，則攔截並防止滑動事件。例如：

var maxSum = 1500; 

var $sliders = $(".slider").slider({ 
    value: 0, 
    min: 0, 
    max: 1500, 
    step: 10, 
    slide: function(event, ui) { 
     var sum = 0; 

     // Don't add the value for this slider; 
     // We need to add the new value represented by the slide event 
     $(".slider").not(this).each(function() { 
      sum += $(this).slider("value"); 
     }); 

     // Add the slide event value 
     sum += ui.value; 

     if (sum > maxSum) event.preventDefault(); 
     else $(this).next().html("Value: " + ui.value); 
    } 
}); 

這是容易發生如果用戶滑動非常迅速被大增量不推價值觀一路最大的唯一的事。 See a working demo here。

Answer 2

您已經將可用點存儲在「普拉」中。

每當用戶調整滑塊時，需要更改所有剩餘的滑塊，以便用戶不能分配超過其餘點。您可以通過將.slider（）MAX選項設置爲滑塊的當前值+剩餘可用點來完成此操作。

for (value in slidersValues) { 
    var currentValue = slidersValues[value]; 
    var newMax; 

    //If max + available is > 1500, we set it to 1500, 
    //otherwise we add the available points to the current values 
    if (currentValue + pula >= 1500) { 
     newMax = 1500; 
    } else { 
     newMax = currentValue + pula; 
    } 

    //jQuery allows you to reset the 'max' value for a slider 
    $('#'+value).slider("option" , max , newMax); 

}