我有 2 个相互依赖的 slider 。 2 个 slider 的最大值为 100。如果第一个的值为 40%,则第二个的值将设置为 60%。但是,我需要在同一页面上发生两组上述场景。我试过:Jsfiddle
第一组 slider 仅应该相互依赖,并且应该在第二组中复制这一点。但是,我面临一个问题,即第一组 slider 中的第一个 slider 和第二个 slider 正在影响第二组 slider 。
(html):
First set
<ul id="sliders">
<li>
<div class="slider">70</div>
<span class="value">0</span>%
</li>
<li>
<div class="slider">30</div>
<span class="value" >0</span>%
</li>
</ul>
second set
<ul id="sliders2">
<li>
<div class="slider2">70</div>
<span class="value">0</span>%
</li>
<li>
<div class="slider2">30</div>
<span class="value" >0</span>%
</li>
</ul>
Javascript:
var sliders = $("#sliders .slider");
var availableTotal = 100;
sliders.each(function() {
var init_value = parseInt($(this).text());
$(this).siblings('.value').text(init_value);
$(this).empty().slider({
value: init_value,
min: 0,
max: availableTotal,
range: "max",
step: 2,
animate: 0,
slide: function(event, ui) {
// Update display to current value
$(this).siblings('.value').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 delta = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
var new_value = value + (delta/2) + 1;
if (new_value < 0 || ui.value == 100)
new_value = 0;
if (new_value > 100)
new_value = 100;
t.siblings('.value').text(new_value);
t.slider('value', new_value);
});
}
});
});
var sliders = $("#sliders2 .slider2");
var availableTotal = 100;
sliders.each(function() {
var init_value = parseInt($(this).text());
$(this).siblings('.value').text(init_value);
$(this).empty().slider({
value: init_value,
min: 0,
max: availableTotal,
range: "max",
step: 2,
animate: 0,
slide: function(event, ui) {
// Update display to current value
$(this).siblings('.value').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 delta = availableTotal - total;
// Update each slider
sliders.not(this).each(function() {
var t = $(this),
value = t.slider("option", "value");
var new_value = value + (delta/2) + 1;
if (new_value < 0 || ui.value == 100)
new_value = 0;
if (new_value > 100)
new_value = 100;
t.siblings('.value').text(new_value);
t.slider('value', new_value);
});
}
});
});
我的预感是 var sliders = $("#sliders2 .slider2");
不会检索第二组 slider ...
------已解决---- 我已经按照太古指出的内容编辑了我的代码。还将代码更新为数学部分的正确公式。新 fiddle :The correct version
最佳答案
我讨厌这种事发生在我身上,你可能只是需要另一双眼睛来关注它。您已将两组 slider 设置为变量:
var sliders
在此 fiddle 中将第二个更改为 sliders2: http://jsfiddle.net/e8fCy/1/它按你的预期工作。
编辑在进一步检查中,你的数学也可能不合格,稍后会检查。
关于jquery - 多个 jQuery-UI slider 的总计完成两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20598683/