有许多使用 jQuery 滑块并运行最大累积总数的示例。但是,我未能成功起草适用于我的应用程序的版本。我需要能够使用 jQuery 滑块设置 6 个 openlayers 图层的单独不透明度,同时不超过 100 个滑块单元的累积总数。
更新
这是我目前实施它的方式。我一生都无法弄清楚如何进行代码重构,以减少代码重复......
var sliders = $("#sliders .slider");
sliders.each(function() {
var value = parseInt($(this).text()),
availableTotal = 100;
$(function() {
$("#one").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_1.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#two").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_2.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#three").slider({
range: "min",
min: 0,
value: 20,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_3.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#four").slider({
range: "min",
min: 0,
value: 16,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_4.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#five").slider({
range: "min",
min: 0,
value: 16,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_5.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
$("#six").slider({
range: "min",
min: 0,
value: 8,
slide: function(event, ui) {
// Get current total
var total = ui.value;
sliders.not(this).each(function() {
total += $(this).slider("option", "value");
});
if (total > availableTotal) {
return false;
}
hii_6.setOpacity(ui.value / 100);
// Update display to current value
$(this).siblings().text(ui.value);
}
});
});
});
原来的
我最熟悉的例子发布在这里和下面 http://jsfiddle.net/markieta/cWyQ3/
var sliders = $("#sliders .slider"); sliders.each(function() { var value = parseInt($(this).text()), availableTotal = 100; $(this).empty().slider({ value: 0, min: 0, max: 100, range: "min", animate: true, 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); t.slider('value', value); }); } }); });
最初,我在每个唯一滑块的滑动事件期间使用 setOpacity 方法设置 OpenLayers 图层不透明度。但是,我无法弄清楚如何使用这种方法保持运行总计,以使我的滑块不会超过 100 个累积单位。
$(function() { $( "#slider1" ).slider({ range: "min", min: 0, value: opacities[0], slide: function(e, ui) { hii_1.setOpacity(ui.value / 100); $( "#amount1" ).val( ui.value ); } }); $("#amount1" ).val($( "#slider1" ).slider( "value" ) ); });
** x6 滑块 **
有什么见解吗?