jQuery Slider - 同时移动滑块
jQuery Slider - Moving Sliders at the same time
我有如下三个滑块:-
<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div>
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div>
$('.slider').each(function() {
var $el = $(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
slide: function(event, ui) {
$($el.data('target')).html('£' + ui.value);
// place code here which will execute when *any* slider moves
}
});
});
我想做的是无论你用哪个滑块,它们都同时增加。
所有三个滑块都有不同的增量,因此需要进行相应更新。
如有任何帮助,我们将不胜感激。
这是使用 stop
和 change
事件的一种方法:-
$('.slider').each(function() {
var $el = $(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
stop: function(event, ui) {
var percent = (100 / ($(this).data('max') - $(this).data('min'))) * $(this).slider('value');
$('.slider').not(this).each(function() {
$(this).slider('value', (($(this).data('max') - $(this).data('min')) / 100) * percent);
});
},
change: function(event, ui) {
$($el.data('target')).html('£' + ui.value);
}
});
});
根据BG101的回答,这是最终结果:-
jQuery('.slider').each(function() {
var $el = jQuery(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
slide: function(event, ui) {
var percent = (100 / (jQuery(this).data('max') - jQuery(this).data('min'))) * jQuery(this).slider('value');
jQuery('.slider').not(this).each(function() {
jQuery(this).slider(
'value',
((jQuery(this).data('max') - jQuery(this).data('min')) / 100) * percent
);
});
jQuery('.slider').each(function() {
var thisTarget = jQuery(this).data('target');
var thisValue = jQuery(this).slider('option','value');
jQuery(thisTarget+' span').html(thisValue);
});
},
});
});
(只是想我会分享)
我有如下三个滑块:-
<div class="slider" data-min="3800" data-max="30000" data-value="3848" data-step="500" data-target=".calc-deposit"></div>
<div class="slider" data-min="15400" data-max="120000" data-value="15393" data-step="2000" data-target=".calc-loan"></div>
<div class="slider" data-min="57000" data-max="450000" data-value="57724" data-step="7500" data-target=".calc-mortgage"></div>
$('.slider').each(function() {
var $el = $(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
slide: function(event, ui) {
$($el.data('target')).html('£' + ui.value);
// place code here which will execute when *any* slider moves
}
});
});
我想做的是无论你用哪个滑块,它们都同时增加。
所有三个滑块都有不同的增量,因此需要进行相应更新。
如有任何帮助,我们将不胜感激。
这是使用 stop
和 change
事件的一种方法:-
$('.slider').each(function() {
var $el = $(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
stop: function(event, ui) {
var percent = (100 / ($(this).data('max') - $(this).data('min'))) * $(this).slider('value');
$('.slider').not(this).each(function() {
$(this).slider('value', (($(this).data('max') - $(this).data('min')) / 100) * percent);
});
},
change: function(event, ui) {
$($el.data('target')).html('£' + ui.value);
}
});
});
根据BG101的回答,这是最终结果:-
jQuery('.slider').each(function() {
var $el = jQuery(this);
$el.slider({
range: "max",
min: $el.data('min'),
max: $el.data('max'),
value: $el.data('value'),
step: $el.data('step'),
slide: function(event, ui) {
var percent = (100 / (jQuery(this).data('max') - jQuery(this).data('min'))) * jQuery(this).slider('value');
jQuery('.slider').not(this).each(function() {
jQuery(this).slider(
'value',
((jQuery(this).data('max') - jQuery(this).data('min')) / 100) * percent
);
});
jQuery('.slider').each(function() {
var thisTarget = jQuery(this).data('target');
var thisValue = jQuery(this).slider('option','value');
jQuery(thisTarget+' span').html(thisValue);
});
},
});
});
(只是想我会分享)