我的所有（jQuery UI）单个滑块都获得相同的值

我希望当我滑动每一个滑块时，同一页面的每个滑块都有自己的值。

当我滑动其中一个滑块时，每个滑块的“滑块”按计划作为条件背景颜色工作，但所有滑块的值都相同。

这是我的JS代码：

$(document).ready(function() { $('.slider').slider({ value: 5, min: 1, max: 10, step: 1, slide: function( event, ui ) { $( ".ui-slider-handle" ).text(ui.value); switch(ui.value){ case 1: { $(this).css('background', 'darkred'); break;} case 2: { $(this).css('background', 'red'); break;} case 3: { $(this).css('background', 'orange'); break;} case 4: { $(this).css('background', 'gold'); break;} case 5: { $(this).css('background', 'yellow'); break;} case 6: { $(this).css('background', '#AAFF00'); break;} case 7: { $(this).css('background', 'lime'); break;} case 8: { $(this).css('background', 'cyan'); break;} case 9: { $(this).css('background', '#00AAFF'); break;} case 10: { $(this).css('background', 'blue'); break;} } } }); $(".ui-slider-handle").val($('.slider').slider( "value" )); }); 

这里是JSfiddle中的代码： http ： //jsfiddle.net/Arkl1te/Wrq3H/

有办法解决这个问题吗？ 我感谢您的帮助！

Answer 1

并不是它们具有相同的值，问题是每次幻灯片发生时都要更新两个句柄。 可能的解决方法： http ： //jsfiddle.net/Wrq3H/3/

 //change text for current's slider handle only $(this).children(".ui-slider-handle").text(ui.value); 

Answer 2

您需要为每个滑块创建单独的值参数。 它们引用相同的变量，因此基于最新值将步骤应用于两者。 尝试以下方法：

 valueone = 5, valuetwo = 5, /* ... other content ... */ $(".ui-slider-handle").val($('#slider-1').slider( "valueone" )); $(".ui-slider-handle").val($('#slider-2').slider( "valuetwo" )); 

Answer 3

在幻灯片的function中，您需要将选择器从具有".ui-slider-handle"所有元素更改为元素中提升幻灯片事件的子元素：

 $(this).children( ".ui-slider-handle" ).text(ui.value); 

该修复程序将允许您使用许多滑块而不更改幻灯片的function示例http://jsfiddle.net/cVUp3/1/