Jquery ui jQuery滑块，组合值-难以使用小增量

我设计了一个jQuery滑块控件，它接受一个点“池”，并允许它们分布在多个滑块之间。它运行得很好，只是我在溢出增量非常小的情况下遇到了一些问题

基本上，可以根据鼠标移动进行大量调整，因此它可以让用户在滑块上“花费”比预期的更多。我不知道如何处理这件事。下面是我的全部代码

为了测试它，用这段代码构建一个简单的HTML页面，并尝试将前两个滑块一直滑动到500，然后尝试滑动第三个滑块。它不会滑动（预期行为）

然后，将第一个或第二个滑块向后滑动一点（减去），然后将第三个滑块向前滑动。你可以偶尔越过预期的“可消费”界限

样本将需要jqueryui，来自googlecdn的最新版本

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>

Javascript

#eq>div{
宽度：300px；
}
#均衡器>分割滑块{
宽度：200px；浮动：左侧；
}
#eq>div>span{
浮动：对；
}
$（文档）.ready（函数（）{
var spendable=1000；
var=0；
职能支出（数量）{
花费+=数量；
$（'attemptedToSpend'）。文本（已用）；
}
功能更改（以前、当前）{
var调整=（当前-以前）；
$（'变化'）。文本（调整）；
回报调整；
}
函数calculateSpent（）{
var合计=0；
$（“#相等滑块”）。每个（函数（）{
总计+=parseInt（$（this）.parent（'div:eq（0）'）.find（'.spend'）.text（））；
});
$（'花费'）。文本（总计）；
}
$（“#相等滑块”）。每个（函数（）{
无功电流=0；
var-previous=0；
var调整=0；
$（此）.slider({
射程：“分钟”，
值：0，
分:0,，
最高：500，
步骤：1，
动画：对，
方向：“水平”，
开始：功能（事件、用户界面）{
},
停止：功能（事件、用户界面）{
},
幻灯片：功能（事件、用户界面）{
//将当前值设置为所选的值。
当前=ui.value；
//确定相对于上一次调整所做的调整
//调整，而不仅仅是滑块的值。
调整=变更（先前、当前）；
如果（花费>=可支出）{
如果（调整>0）
返回false；
}
//如果我们可以的话，花掉这些积分。
支出（调整）；
//设置上一个值
先前=当前；
$（this）.parent（'div:eq（0）'）.find（'.spend'）.text（当前）；
calculateSpent（）；
}
});
});
});

Html

分布

可支出总分：1000
花费的总积分（尝试）：0
花费的总分：0
更改：0
测试1


0
测试2


0
测试3


0
测试4


0
测试5


0

我试着让你的脚本保持原样，但最终大部分都被重写了。现在应该是固体了。好消息：我只更改了JS，其他一切都完好无损，尽管我不再更新所有监控字段

---

非常感谢你的帮助，这将是非常宝贵的帮助我更好地理解它。我在想你是怎么解决问题的。@Stacey:老实说，我不能告诉你。我已经经历了一些关于究竟是什么原因导致问题的理论，有一段时间，我试图通过改变您的实现来解决这些确切问题。然后在某个时候，我决定从头重写它，看看我会怎么做，结果我没有遇到同样的问题。我能记得的最好的候选者是幻灯片事件中的

ui.value

，从同一事件中调用的方法

$slider.slider（'value'）

将有这种差异，即

$slider.slider（'value'）

将始终关闭1-3。但是，我在你的脚本中找不到任何一点会扭曲结果的地方。我的方法的两个主要变化是：（1.）我将值存储在数组中，而不是从标记中解析它们；（2.）我实际调整了有问题的滑块的值。我使用标记只是为了显示，而不是读取值。我认为归结起来，你只是知道你比我做得更好。我仍然只是一个新手开发人员，对Javascript更为幼稚。（没有jQuery，我甚至无法使用javascript。）

<style type="text/css">
    #eq > div {
        width:300px;
    }
    #eq > div .slider {
        width: 200px; float: left;
    }
    #eq > div > span {
        float: right;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        var spendable = 1000;
        var spent = 0;

        function spend(quantity) {
            spent += quantity;
            $('#attemptedToSpend').text(spent);
        }

        function change(previous, current) {
            var adjustment = (current - previous);
            $('#change').text(adjustment);
            return adjustment;
        }

        function calculateSpent() {
            var totalled = 0;

            $("#eq .slider").each(function () {
                totalled += parseInt($(this).parent('div:eq(0)').find('.spent').text());
            });

            $('#spent').text(totalled);
        }

        $("#eq .slider").each(function () {
            var current = 0;
            var previous = 0;
            var adjustment = 0;

            $(this).slider({
                range: "min",
                value: 0,
                min: 0,
                max: 500,
                step: 1,
                animate: true,
                orientation: "horizontal",
                start: function (event, ui) {
                },
                stop: function (event, ui) {
                },
                slide: function (event, ui) {
                    // set the current value to whatever is selected.
                    current = ui.value;

                    // determine the adjustment being made relative to the last
                    // adjustment, instead of just the slider's value.
                    adjustment = change(previous, current);

                    if (spent >= spendable) {
                        if (adjustment > 0)
                            return false;
                    }

                    // spend the points, if we are able to.
                    spend(adjustment);

                    // set the previous value
                    previous = current;

                    $(this).parent('div:eq(0)').find('.spent').text(current);

                    calculateSpent();

                }
            });
        });
    });
</script>

<p class="ui-state-default ui-corner-all" style="padding: 4px; margin-top: 4em;">
    <span style="float: left; margin: -2px 5px 0 0;"></span>Distribution
</p>
    <strong>Total Points Spendable: </strong><div id="spendable">1000</div>
    <strong>Total Points Spent (Attempted): </strong><div id="attemptedToSpend">0</div>
    <strong>Total Points Spent: </strong><div id="spent">0</div>
    <strong>Change: </strong><div id="change">0</div>
    <div id="status"></div>

<div id="eq">
    <div style="margin: 15px;" id="test1">Test1</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>

    <div style="margin: 15px;" id="test2">Test2</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>

    <div style="margin: 15px;" id="test3">Test3</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>

    <div style="margin: 15px;" id="test4">Test4</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>

    <div style="margin: 15px;" id="test5">Test5</div>
    <br />
    <div class="slider"></div><span class="spent">0</span>
</div>

$(
  function()
  {
    var
        maxValueSlider = 500,
        maxValueTotal = 1000,
        $sliders = $("#eq .slider"),
        valueSliders = [],
        $displaySpentTotal = $('#spent');

    function arraySum(arr)
    {
      var sum = 0, i;
      for(i in arr) sum += arr[i];
      return sum;
    }

    $sliders
      .each(
        function(i, slider)
        {
          var
            $slider = $(slider),
            $spent = $slider.next('.spent');
          valueSliders[i] = 0;
          $slider
            .slider(
              {
                range: 'min',
                value: 0,
                min: 0,
                max: maxValueSlider,
                step: 1,
                animate: true,
                orientation: "horizontal",
                slide:
                  function(event, ui)
                  {
                    var
                      sumRemainder = arraySum(valueSliders) - valueSliders[i],
                      adjustedValue = Math.min(maxValueTotal - sumRemainder, ui.value);
                    valueSliders[i] = adjustedValue;
                    // display the current total
                    $displaySpentTotal.text(sumRemainder + adjustedValue);
                    // display the current value
                    $spent.text(adjustedValue);
                    // set slider to adjusted value
                    $slider.slider('value', adjustedValue);

                    // stop sliding (return false) if value actually required adjustment
                    return adjustedValue == ui.value;
                  }
              }
            );
        }
      );
  }
);