jQuery Bootstrap Slider 更改值处理程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21869046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Slider change value handler
提问by Lys777
I'm using Bootstrap Slider, and I was wondering if there is any way to include a handler for a value change. I see that the documentation includes handlers for slideStart, slide and slideStop, but none for "change" (of value).
我正在使用 Bootstrap Slider，我想知道是否有任何方法可以包含值更改的处理程序。我看到文档包括用于 slideStart、slide 和 slideStop 的处理程序，但没有用于“更改”（值）的处理程序。
It's possible that they could slide the slider around and (upon release) end up on the same value, in which case I would NOT want the event to fire. Only if they slide it to a new value.
有可能他们可以左右滑动滑块并且（在释放时）最终达到相同的值，在这种情况下，我不希望事件触发。只有当他们将其滑动到新值时。
I've tried:
我试过了：
$('#sliderAdminType').slider({
formater: function(value) {
// my formater stuff that works
},
change: function(event, ui) {
console.log("has changed");
}
});
and
和
$('#sliderAdminType').change(function() {
console.log("has changed");
});
and
和
$('#sliderAdminType').slider().change(function() {
console.log("has changed");
});
and
和
$('body').on('change', '#sliderAdminType', function(e){
console.log("has changed");
});
回答by Felix
You can do the following steps:
您可以执行以下步骤：
1) Use slideStartevent to get the original value of your slider
1）使用slideStart事件获取滑块的原始值
2) Use slideStopevent to get the new value of your slider
2）使用slideStop事件获取滑块的新值
3) Compare this two value, if it's different then fire your code
3）比较这两个值，如果不同则触发你的代码
var originalVal;
$('.span2').slider().on('slideStart', function(ev){
originalVal = $('.span2').data('slider').getValue();
});
$('.span2').slider().on('slideStop', function(ev){
var newVal = $('.span2').data('slider').getValue();
if(originalVal != newVal) {
alert('Value Changed!');
}
});
回答by Anton Lyhin
The accepted answer is not valid for range: trueslider
接受的答案对范围无效：真正的滑块
Here is double-slider check: https://jsfiddle.net/oayj5Lhb/
这是双滑块检查：https: //jsfiddle.net/oayj5Lhb/
For double slider:"change" event returns both newValueand oldValueobjects. Keep in mind that 'change', 'slideStart', 'slideStop' events are triggered on mouse move(when I asked why the answer was "this is the proper way of implementation", for me it looks a bit strange). Here an example:
对于双滑块：“change”事件返回newValue和oldValue对象。请记住，鼠标移动时会触发'change'、'slideStart'、'slideStop' 事件（当我问为什么答案是“这是正确的实现方式”时，对我来说这看起来有点奇怪）。这里有一个例子：
$('#your-slider').slider().on('change', function(event) {
var a = event.value.newValue;
var b = event.value.oldValue;
var changed = !($.inArray(a[0], b) !== -1 &&
$.inArray(a[1], b) !== -1 &&
$.inArray(b[0], a) !== -1 &&
$.inArray(b[1], a) !== -1 &&
a.length === b.length);
if(changed ) {
//your logic should be here
}
});
Please note:[2, 1] and [1, 2] are considired to be equal because slider pair can be interchangeable.
请注意：[2, 1] 和 [1, 2] 被认为是相等的，因为滑块对可以互换。
回答by TomerMahari
try this if on function didn't work for you like me
如果功能对像我这样的您不起作用，请尝试此操作
$('#yourSlider').bind("slideStop", function (e)
$('#yourSlider').bind("slideStop", function (e)
回答by Mohammad Karimi
Instead of change event just use the slide. The promoter is not working well, so in Slide you can set value again.
而不是更改事件只需使用幻灯片。启动器工作不正常，因此您可以在 Slide 中再次设置值。
var thresholdSlider = $('#Threshold');
thresholdSlider.slider({
formater: function (value) {
return 'Current value: ' + value;
}
});
thresholdSlider.slider().on('slide', function (ev) {
thresholdSlider.slider('setValue', ev.value);
});
