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

多个Jquery UI Slider非线性值

1 个答案: