Javascript 多个Jquery UI滑块非线性值

我一直在寻找并试图找到一个解决方案，但不幸的是，我无法绕过它。我有多个jQueryUI滑块，它们在从数组中滑动时都有其值。最后，我试图得到滑块的值，并将其与其他滑块相加。以下是仅用于两个滑块的代码：

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

有人能帮我一下吗

---

非常感谢

我更改了整个脚本，但希望它现在能做您希望它做的事情-只需扩展SliderAfrangesValues数组（并添加一个具有正确ID的新div）即可添加更多滑块和值。现在它的脚本更加灵活：

虚拟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);
    }
});

var sliderRangeValues=[
[0, 100, 200, 300],
[0, 300, 600, 900],
[0, 1, 2, 3, 4, 5]
];
函数getAllSliderValues（sliderCount）{
var sliderValues=0；
对于（变量i=0；i

非常感谢：））非常感谢。如何调用所有滑块并执行重置按钮？并放置所有值为0的句柄如果您阅读了slider API文档，您可以自己回答这些问题：，如果您被困在某个地方，请随时打开新问题。重置按钮可以使用任何元素上的单击处理程序和类似：$（'.slider'）.slider（{value:0}）；-另外，如果一个问题得到了回答，并且对你有所帮助，那么接受它，或者至少把它投上赞成票&很抱歉，在stack overflow上没有使用，我仍然很新，并且从中得到了要点。我阅读了api并实现了您所述的语句，但由于上面的代码正在循环中生成滑块，如何在其中实现您的重置语句？我更新了一些重置按钮的fiddle:。研究这些片段并试着理解它。因为您似乎是jquery和/或JS编码方面的新手，所以请真正尝试理解每一行。从现在开始，我不再继续。上面的这段代码很有效，如果您获得了它，那么您想要实现的每一个附加功能都应该很容易。