Javascript 当点的范围为空时，如何停止jQuery滑块（条）

我对jQuery UI滑块（）有问题。 我在我的网站上创建了两个，有一个带有“点”的DIV（我在那里输入了1500）。增加后的每个滑块从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);
}

$（“#addMapPage”）.ready（函数（）{
$（“#addMap”）。单击（函数（）{checkMap（）}）；
$（“.vChanger”）.slider（{步骤：10，
最高：1500，
幻灯片：函数（事件，ui）{checkValues（）}，
停止：函数（事件，ui）{checkValues（）}
});
校验值（）；
});
函数getValues（）{
var data=新数组（）；
数据['water']=$（“#water”）。滑块（“值”）；
数据['stepe']=$（“#stepe”）。滑块（“值”）；
数据[‘沼泽’]=$（“#沼泽”）。滑块（“值”）；
数据['desert']=$（“#desert”）。滑块（“值”）；
数据['forest']=$（“#forest”）。滑块（“值”）；
数据['mountain']=$（“#mountain”）。滑块（“值”）；
数据['hill']=$（“#hill”）。滑块（“值”）；
返回数据；
}
函数checkValues（）{
var slidersValues=getValues（）；//获取滑块值
var总和=0；
var pula=parseInt（$（“#pula”）.text（）；//要使用的点（现在可以小于0）
if（pula<0）{
$（“.vChanger”）.slider（{range:pula}）；
}
用于（滑块值中的值）{
总和+=滑块值[值]；
$（“#”+value+“Info”）.text（滑块值[value]）；
}
var pula=1500和；
$（#pula”）.text（pula）；
}

HTML:

沃达：
步骤：
巴格诺：
Pustynia：
拉斯维加斯：
戈里：
Wzgórza：
纳兹瓦·马皮：

要使用的点

以下是示例（3个屏幕截图）：

---

任何想法，如何限制点数（不要让点数小于0）？

您已经将可用点数存储在“pula”中了

每当用户调整滑块时，都需要更改所有剩余的滑块，以便用户分配的点数不能超过剩余的点数。可以通过将.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 );

}

---

您会发现调整滑块的最大值可能不是一个非常理想的解决方案。它将更改滑块上增量的比例，并且不能很好地代表当前滑块值所代表的整体部分。相反，如果所有其他滑块的当前总和加上此事件的值超过最大值，则拦截并阻止幻灯片事件。例如：

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);
    }
});

---

如果用户以很大的增量非常快速地滑动，那么唯一容易发生的事情就是不会将值一直推到最大值

我已经解开了问题和解决方案，但是这段代码不起作用，所以我用另一种方式写了它。非常感谢：）效果很好，经过一个晚上，我发现，这是一个很好的方法，可以在lider开始时绑定检查max，但您的解决方案也可以：）顺便说一句，JSFIDLE太棒了，我一直在寻找类似的东西，所以也谢谢。

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);
    }
});