jquery-ui - jQuery Slider，组合值 - 小增量有困难

Question

我设计了一个 jQuery slider 控件，它采用一个“池”点，并允许它们分布在多个 slider 之间。它工作得很好，除了我遇到了一些溢出增量非常小的问题。

基本上，可以根据鼠标移动进行大量调整，因此它可以让某人在 slider 上“花费”比预期更多。我不知道如何处理这个问题。下面发布的是我的整个代码。

要对其进行测试，请使用此代码构建一个简单的 HTML 页面，并尝试将前两个 slider 一直滑动到 500，然后尝试滑动第三个。它不会滑动(预期行为)。

然后，将第一个或第二个 slider 向后滑动一点(减法)，然后将第三个向前滑动。您偶尔可以超出预期的“可消耗”范围。

示例将需要 jQuery UI，来自 google CDN 的最新版本。

<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

<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>

html

<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>

Answer 1

我尝试保持您的脚本完好无损，但最终在很大程度上重写了它。现在应该很稳固了。好消息:我只更改了 JS，其他一切都完好无损，尽管我不再更新所有监控字段。

DEMO

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