多个Jquery UI Slider非线性值(Multiple Jquery UI Slider non linear value)

多个Jquery UI Slider非线性值(Multiple Jquery UI Slider non linear value)

我一直在寻找并试图找到一个解决方案，但遗憾的是无法绕过它。 我有多个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

有人可以尝试给我一些帮助

非常感谢

I have been searching and trying to find a solution for this but unfortunately can't get my way round it. I have multiple jQuery UI sliders which all have their values on sliding from an array. At the end I am trying to get the value of the slider and add it up with the other sliders. Here is the code for only two sliders:

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

The first slider works good, but unfortunately when I slide the second one the values are not showing the array ones but simply 1 , 2 , 3

Can someone please try giving me some help

Many thanks

最满意答案

我改变了整个脚本，但希望它现在正在做你想做的事 - 只需扩展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); } });

I changed the whole script, but hopefully its doing now what you want it to do - just extend the sliderRangesValues Array (and add a new div with the right ID) to add more slider and values. Its now a much more flexible script:

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

Dummy 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非线性值(Multiple Jquery UI Slider non linear value)

我一直在寻找并试图找到一个解决方案，但遗憾的是无法绕过它。 我有多个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

有人可以尝试给我一些帮助

非常感谢

I have been searching and trying to find a solution for this but unfortunately can't get my way round it. I have multiple jQuery UI sliders which all have their values on sliding from an array. At the end I am trying to get the value of the slider and add it up with the other sliders. Here is the code for only two sliders:

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

The first slider works good, but unfortunately when I slide the second one the values are not showing the array ones but simply 1 , 2 , 3

Can someone please try giving me some help

Many thanks

最满意答案

我改变了整个脚本，但希望它现在正在做你想做的事 - 只需扩展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); } });

I changed the whole script, but hopefully its doing now what you want it to do - just extend the sliderRangesValues Array (and add a new div with the right ID) to add more slider and values. Its now a much more flexible script:

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

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