javascript - jquery 多个 slider 将值插入文本框

Question

我有多个 slider 共享一个共同的最大数字，我现在尝试将这些数字捕获到文本输入中，但我不知道我在做什么。 JavaScript 将打印 只要类(class)“用完”，将数字放入跨度中就没有问题。但当我尝试使用文本输入时不起作用。我还为此做了一个jsfiddle http://jsfiddle.net/zkyks/

将这些值绑定(bind)到输入的正确方法是什么？我已经通过调用 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/