我的所有(jQuery UI)单个滑块都获得相同的值 [英] All my (jQuery UI) single sliders get the same value
问题描述
我希望当我滑动每一个滑块时,同一页面的每个滑块都有自己的值。
I want each slider of the same page have it's own value when I slide each one of them.
当我滑动其中一个滑块时,滑块每个滑块的工作方式与条件背景颜色一样,但所有滑块的值都相同。
When I slide one of them, the "slider block" of each slider works as planned as the conditional background-color, but the value is the same for all the sliders.
这是我的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/
And here's the code in JSfiddle: http://jsfiddle.net/Arkl1te/Wrq3H/
有没有办法解决这个问题?感谢您的帮助!
Is there a way to fix that? I appreciate your help!
推荐答案
并不是说它们具有相同的值,问题是您每个都更新两个句柄幻灯片发生的时间。可能的解决方法: http://jsfiddle.net/Wrq3H/3/
It's not that they have the same value, the problem is that you're updating both handles each time that a slide occurs. Possible fix: http://jsfiddle.net/Wrq3H/3/
//change text for current's slider handle only
$(this).children(".ui-slider-handle").text(ui.value);
这篇关于我的所有(jQuery UI)单个滑块都获得相同的值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!