问题描述
限时送ChatGPT账号..我正在使用 bootstrap-slider.js - http://www.eyecon.ro/bootstrap-滑块/ 给我范围滑块功能.我在一个页面上有 9 个滑块,并且仅从第一个滑块获取值.
I am using bootstrap-slider.js - http://www.eyecon.ro/bootstrap-slider/ to give me range slider functionality. I have 9 sliders on one page and am getting the value only from the first slider.
如何获取其他滑块的值?
How do I get the value for the other sliders?
<input type="text" class="sliderMaster slider-horizontal" id="sl9" name="q12" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
<input type="text" class="sliderMaster slider-horizontal" id="sl3" name="q3" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
$(function(){
$('#sl1').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
$('#sl2').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
$('#sl3').slider({
formater: function(value) {
return 'Current value: '+value;
}
});
});
推荐答案
您可以获得如下值:
console.log("Slider 1 = "+$("#sl1").data('slider').getValue());
console.log("Slider 2 = "+$("#sl2").data('slider').getValue());
console.log("Slider 3 = "+$("#sl3").data('slider').getValue());
在这里小提琴.
编辑
所以澄清一下 - 似乎确实存在一个问题,即滑块实际上并未更新基础输入的值.当该输入通过表单提交到服务器时,这会导致问题.
So to clarify - there does appear to be a problem that the slider is not actually updating the value of the underlying input. And when that input is posted via a form submit to the server, this causes a problem.
您可以尝试添加一个事件以在滑块更改时显式更新输入,如下所示:
You could try adding an event to explicitly update the input when a slider changes, like so:
$(function(){
$('#sl1').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
$('#sl2').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
$('#sl3').slider({
formater: function(value) {
return 'Current value: '+value;
}
}).on('slideStop', function(ev){
$(this).val($(this).data('slider').getValue());
});
});
并且在每个输入中将 value
设置为与 data-slider-value
相同的值,因为这将是默认值,即
and in each input set value
to the same value as data-slider-value
as this will be the default value i.e.
<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">
这篇关于如何从范围滑块中获取多个值 - bootstrap-slider.js的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论