多个 Jquery UI Slider 非线性值

Question

我一直在寻找并试图找到解决方案，但不幸的是无法解决。我有多个 jQuery UI 滑块，它们在从数组中滑动时都有它们的值。最后，我试图获取滑块的值并将其与其他滑块相加。这是只有两个滑块的代码：

$(function () {
    var labelArr = new Array(0, 200, 400, 600);
    $("#slider").slider({
        values: 0,
        min: 0,
        max: labelArr.length - 1,
        slide: function (event, ui) {
            mbdata = labelArr[ui.value] + $("#slider_2").slider("value") + $("#slider_3").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
            g1.refresh(mbdata);
        }
    });
});

$(function () {
    var labelArr = new Array(0, 300, 900, 1200);
    $("#slider_2").slider({
        value: 0,
        min: 0,
        max: labelArr.length - 1,
        slide: function (event, ui) {
            mbdata = labelArr[ui.value] + $("#slider_3").slider("value") + $("#slider").slider("value") + $("#slider_4").slider("value") + $("#slider_5").slider("value") + $("#slider_6").slider("value");
            g1.refresh(mbdata);
        }
    });
});

第一个滑块效果很好，但不幸的是，当我滑动第二个滑块时，值没有显示数组，而只是 1 , 2 , 3

有人可以帮我帮忙吗

非常感谢

Answer 1

我更改了整个脚本，但希望它现在可以按照您的意愿进行操作 - 只需扩展 sliderRangesValues 数组（并添加一个具有正确 ID 的新 div）以添加更多滑块和值。它现在是一个更加灵活的脚本：

http://jsfiddle.net/fKUAe/1/

虚拟 HTML：

<div id="slider0" class="slider"></div>
<div id="slider1" class="slider"></div>
<div id="slider2" class="slider"></div>
<input type="text" id="slidervalues" value="0" />

jQuery:

var sliderRangeValues = [
    [0, 100, 200, 300],
    [0, 300, 600, 900],
    [0, 1, 2, 3, 4, 5]
];

function getAllSliderValues(sliderCount) {
    var sliderValues = 0;
    for (var i = 0; i < sliderCount; i++) {
        var uiValue = $('#slider' + i).slider('value');
        sliderValues += sliderRangeValues[i][uiValue];
    }
    $('#slidervalues').val(sliderValues);
}

function initSlider(i, sliderCount) {
    $('#slider' + i).slider({
        values: 0,
        min: 0,
        max: sliderRangeValues[i].length - 1,
        slide: function (event, ui) {
            $('#slider' + i).slider('value', ui.value);
            getAllSliderValues(sliderCount);
        }
    });
}

$(function () {
    var sliderCount = $('.slider').length;
    for (var i = 0; i < sliderCount; i++) {
        initSlider(i, sliderCount);
    }
});