Question

我有多个共享最大数量的滑块，我现在尝试将这些数字捕获到文本输入中，但我不知道自己在做什么。 JavaScript将打印出来只要班级花费了＃34;，将数字划分为跨度就没有问题。但是当我用文本输入尝试它时，它不起作用。我也为此做了一个小问题 http://jsfiddle.net/zkyks/

将这些值绑定到输入的正确方法是什么？我通过拨打id来单独完成此操作，但我不知道如何在此处实现。

提前致谢。

JS

$(

function () {
    var
    maxValueSlider = 100,
        maxValueTotal = 100,
        $sliders = $("#eq .work_slider"),
        valueSliders = [],
        $displaySpentTotal = $('#spent');
    $displaySpendable = $('#spendable');

    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: 5,
            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);
                $displaySpendable.text(maxValueTotal - 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;

            }
        });
    });
});

HTML

<div class="panel">
    <label class="panel_label">Sliders %:</label>
    <div id="eq">
        1:<div id="work_slider1" name="work_slider1" class="work_slider"></div>
             <input type="text" name="work_spent1" id="work_spent1" />
        2:<div id="work_slider2" name="work_slider2" class="work_slider"></div>
             <input type="text" name="work_spent2" id="work_spent2" />
        3:<div id="work_slider3" name="work_slider3" class="work_slider"></div>
             <input type="text" name="work_spent3" id="work_spent3" />
        4:<div id="work_slider4" name="work_slider4" class="work_slider"></div>
              <input type="text" name="work_spent4" id="work_spent4" />
    </div>
    <div id="spendable">100</div>
</div>

Answer 1

要在代码中进行最小化更改，您只需在return中slide: function (event, ui) {...}语句之前添加一行：

$(this).next().val(adjustedValue); //set the value of input next to slider

并移除<br/>和<div>之间的<input>。

或者保留一个<br/>并使用：

$(this).next().next().val(adjustedValue);

工作示例： http://jsfiddle.net/k8UkE/

Answer 2

是否为第一个滑块编辑了一些代码。看看是否有帮助

替换为// $ displaySpendable = $（'＃work_spent1'）

// $ displaySpentTotal.val（sumRemainder + adjustedValue）; $ displaySpendable.val（maxValueTotal - sumRemainder - adjustedValue）;

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

$ displaySpendable = $（'＃work_spent1'）;

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: 5,
        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.val(sumRemainder + adjustedValue);
            $displaySpendable.val(maxValueTotal - 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;

        }
    });
});

}）;

jquery多个滑块将值插入文本框

2 个答案: