多个jQuery滑块 [英] Multiple jquery sliders
问题描述
我正在努力使用多个jQuery滑块-
在这种情况下如果一个滑块增加，其他滑块相应减少.滑块正在动态创建.我尝试了很多例子，但是没有运气.
我将解释这种情况，如果有3个滑块，并且每个滑块分别设置为500、1000、1500，如果我将第一个滑块的值增加到100(500 + 100)，则应该从其他两个滑块(每个50个)中减少100个).
我检查了 http://jsfiddle.net/jenishkottaram/sNfBM/14/ 和 http://jsfiddle.net/Y5ZLL/400/，但对我而言没有帮助.
任何帮助都将不胜感激.
谢谢
//滑块从此处开始
drawSlider: function(elementId, sliderMax, sliderVal, rate) {
$("#" + elementId).each(function() {
$( this ).empty().slider({
range: "max",
min: 0,
max: sliderMax,
value: sliderVal,
step: 100,
slide: function(event, ui) {
// Update display to current value
$(this).siblings().text(ui.value);
// Get current total
var total = 0;
$("#" + elementId).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 = sliderMax - total;
// Update each slider
$("#" + elementId).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);
});
}});});},
我正在使用for循环动态显示滑块
for (i = 0; i < aBal.length; i++) {
for (j = 0; j < balanceRange.length; j++) {
if (aBal[i] == balanceRange[j]) {
if (aCur[j] == activeCurrency) {
$('#account-wrapper-holder').append('<div class="account-wrapper">' +
'<h6>' + aName[j] + ':' + aNum[j] + '</h6>' +
'<p><span id="text-tot-allocate-value' + aName[j] + aNum[j] + '">Current cash balance: $' + balanceRange[j] + '</span>' +
'<span>Total to allocate:<input type="text" id="tot-allocate-value' + aName[j] + aNum[j] + '" value="' + balanceRange[j] + '" onchange="s.setValue(parseInt(this.value))"/></span></p>' +
'<div class="slider_class"><div class="cash-slider" id="slider-' + aName[j] + aNum[j] + '"></div>' +
'</div><span class="value">0</span><span class="var-account-total-balance" style="float:right;">$0</span></div>'
);
{
_this.drawSlider('slider-' + aName[j] + aNum[j] + '', sumOfCurrencyBalances, balanceRange[j], accountRate);
$("#" + elementId)
这意味着给我一组只有一个元素的元素(ID为 elementId 的元素)".
$("#" + elementId).not(this)
这意味着给我相同的(一个元素)集合，然后给我其中所有不是 this 的元素(即除实际上存在的元素之外的所有其他元素)
所以换句话说，它只是一个空集，这解释了为什么您的警报显示您没有在迭代它……它没有可迭代的:-)
我认为您可能想做的是在所有滑块上添加一些类(例如，"slider")(实际上，我认为jQuery UI可以为您做到这一点，因此您可以使用添加的任何类).这样就可以做到:
$("." + thatClass).not(this)
我想这是您想要的.
希望有帮助.
I'm struggling with a multiple jQuery slider -
In this scenario if one slider increases the other sliders decreases accordingly. The sliders are creating dynamically. I tried many examples but there is no luck.
I will explain the scenario if there is 3 slider and each set to 500, 1000,1500 , if I increase the value of first slider to 100(500+100) then 100 should be reduced from the other two(50 each).
I checked http://jsfiddle.net/jenishkottaram/sNfBM/14/ and http://jsfiddle.net/Y5ZLL/400/ but no help in my case.
Any help should be greatly appreciated.
Thanks
//slider starts here
drawSlider: function(elementId, sliderMax, sliderVal, rate) {
$("#" + elementId).each(function() {
$( this ).empty().slider({
range: "max",
min: 0,
max: sliderMax,
value: sliderVal,
step: 100,
slide: function(event, ui) {
// Update display to current value
$(this).siblings().text(ui.value);
// Get current total
var total = 0;
$("#" + elementId).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 = sliderMax - total;
// Update each slider
$("#" + elementId).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);
});
}});});},
I'm using a for loop to dynamically display the sliders
for (i = 0; i < aBal.length; i++) {
for (j = 0; j < balanceRange.length; j++) {
if (aBal[i] == balanceRange[j]) {
if (aCur[j] == activeCurrency) {
$('#account-wrapper-holder').append('<div class="account-wrapper">' +
'<h6>' + aName[j] + ':' + aNum[j] + '</h6>' +
'<p><span id="text-tot-allocate-value' + aName[j] + aNum[j] + '">Current cash balance: $' + balanceRange[j] + '</span>' +
'<span>Total to allocate:<input type="text" id="tot-allocate-value' + aName[j] + aNum[j] + '" value="' + balanceRange[j] + '" onchange="s.setValue(parseInt(this.value))"/></span></p>' +
'<div class="slider_class"><div class="cash-slider" id="slider-' + aName[j] + aNum[j] + '"></div>' +
'</div><span class="value">0</span><span class="var-account-total-balance" style="float:right;">$0</span></div>'
);
{
_this.drawSlider('slider-' + aName[j] + aNum[j] + '', sumOfCurrencyBalances, balanceRange[j], accountRate);
$("#" + elementId)
That means "give me a set of elements with only one element (the one with an ID of elementId)".
$("#" + elementId).not(this)
That means "give me that same set (of one element), and then give me all the elements in it which are not this (ie. every element except the one that's actually in there).
So in other words, it's just an empty set, and that explains why your alerts showed that you weren't iterating through it ... it had nothing to iterate through :-)
I think what you maybe want to do instead is add some class (eg. "slider") on all your sliders (actually I think jQuery UI might do this for you, so you could just use whatever class they add). That way you could do:
$("." + thatClass).not(this)
which I think is more what you want.
Hope that helps.
这篇关于多个jQuery滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
