多个jQuery-UI滑块的组合总数 [英] Combined total for multiple jQuery-UI Sliders
问题描述
我正在尝试实现一个页面,其中有4个jQuery-UI滑块,并且我想做到这一点,以便所有4个滑块的总和永远不会超过400.
I'm trying to implement a page where there are 4 jQuery-UI sliders, and I want to make it so the combined total of all 4 sliders will never go over 400.
我不介意该方法的实现方式,它可以从0开始,并且一旦您更改1滑块,剩余的可用总量就会减少,或者将滑块设置为超过最大值,则会减小另一个值滑块.
I don't mind which way this is implemented, it can be from a 0 start, and as soon as you change 1 slider, the remaining available total decreases or setting a slider past the maximum, decreases the values on the other sliders.
P.S.滑块以10为增量.
P.S. The sliders go in increments of 10.
所有创意&欢迎提出建议,如果您要测试,我已经设置了 jsFiddle .
All ideas & suggestions are welcome, and I've set up a jsFiddle if you'd like to test.
推荐答案
在这里开始吧:
var sliders = $("#sliders .slider");
sliders.each(function() {
var value = parseInt($(this).text(), 10),
availableTotal = 400;
$(this).empty().slider({
value: 0,
min: 0,
max: 400,
range: "max",
step: 10,
slide: function(event, ui) {
// Update display to current value
$(this).siblings().text(ui.value);
// Get current total
var total = 0;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
// Need to do this because apparently jQ UI
// does not update value until this event completes
total += ui.value;
var max = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
t.slider("option", "max", max + value)
.siblings().text(value + '/' + (max + value));
t.slider('value', value);
});
}
});
});
这里是一个简单的演示: http://jsfiddle.net/yijiang/Y5ZLL /4/
Here's a simple demo of this: http://jsfiddle.net/yijiang/Y5ZLL/4/
这篇关于多个jQuery-UI滑块的组合总数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!