javascript - 当点范围为空时如何停止 jQuery slider (条)

Question

我在使用 jQuery-UI slider ( http://jqueryui.com/demos/slider/#default ) 时遇到问题。 我在我的网站上创建了其中几个，并且有一个带有“积分”的 DIV(我在那里输入了 1500)。增加后的每个 slider 都会从 DIV 中获取点，因此 - 当我将一个 slider 从 0 增加到 100 时，DIV 中只剩下 1400 个点。当我增加另一个 slider 时，DIV 中的点将会减少。如果我减少其中一个 slider ，这些点将被添加到 DIV 中 - 这非常有效。 但是...我需要在 DIV 中的点增益 0 后禁用 slider 的增加值(不能有小于 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

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

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 .