Javascript 多滑块：当所有滑块的值之和超过阈值时弹出
当所有滑块值的总和超过阈值（例如80）时，我试图获得一个警告弹出窗口。我不确定是否应该在javascript文件或html中执行此操作，我尝试在这两个文件中添加变量exVal2到exVal15，但当我移动滑块并且没有显示弹出窗口时，它不会得到更新 你能告诉我怎么做吗 slider.htmlJavascript 多滑块：当所有滑块的值之和超过阈值时弹出,javascript,jquery,popup,bootstrap-slider,Javascript,Jquery,Popup,Bootstrap Slider,当所有滑块值的总和超过阈值（例如80）时，我试图获得一个警告弹出窗口。我不确定是否应该在javascript文件或html中执行此操作，我尝试在这两个文件中添加变量exVal2到exVal15，但当我移动滑块并且没有显示弹出窗口时，它不会得到更新 你能告诉我怎么做吗 slider.html <div class = "row"> <div class = "col-md-12"> <div class = "col-md-4">
<div class = "row">
<div class = "col-md-12">
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
AAAAAAAAAAAAA
</p>
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step=".1" style="text-align: center"/>
<hr />
<input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex3" data-slider-id='ex3Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex4" data-slider-id='ex4Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex5" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex17" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex18" data-slider-id='ex5Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<div class="wrapper">
<hr />
<p>
BBBBBBBBBBBBBB
</p>
<input id="ex6" data-slider-id='ex6Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step=".1" />
<hr />
<input id="ex7" data-slider-id='ex7Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex8" data-slider-id='ex8Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex9" data-slider-id='ex9Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex10" data-slider-id='ex10Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
</div>
</div>
<div class = "col-md-4">
<hr />
<div class="wrapper">
<p>
CCCCCCCCCCC
</p>
<input id="ex11" data-slider-id='ex11Slider' type="text" data-slider-min="0" data-slider-max="80" data-slider-step="1" />
<hr />
<input id="ex12" data-slider-id='ex12Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex13" data-slider-id='ex13Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex14" data-slider-id='ex14Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
<input id="ex15" data-slider-id='ex15Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step=".1" data-slider-orientation="vertical" />
</div>
</div>
</div>
var $ex1 = $('#ex1');
var $ex2 = $('#ex2');
var $ex3 = $('#ex3');
var $ex4 = $('#ex4');
var $ex5 = $('#ex5');
var $ex6 = $('#ex6');
var $ex7 = $('#ex7');
var $ex8 = $('#ex8');
var $ex9 = $('#ex9');
var $ex10 = $('#ex10');
var $ex11 = $('#ex11');
var $ex12 = $('#ex12');
var $ex13 = $('#ex13');
var $ex14 = $('#ex14');
var $ex15 = $('#ex15');
var $ex16 = $('#ex16');
var $ex17 = $('#ex17');
var $ex18 = $('#ex18');
var ex2Val = 5.5;
var ex3Val = 10.5;
var ex4Val = 6.5;
var ex5Val = 9.5;
var ex17Val = 4.5;
var ex18Val = 8.5;
var ex7Val = 7.5;
var ex8Val = 5.5;
var ex9Val = 6.5;
var ex10Val = 8.5;
var ex12Val = 7.5;
var ex13Val = 4.5;
var ex14Val = 3.5;
var ex15Val = 6.5;
$('#ex1').slider({
value : ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val,
formatter: function(value) {
return 'ABCD: ' + value;
}
});
$('#ex2').slider({
value : ex2Val,
tooltip_position:'bottom',
reversed : true,
formatter: function(value) {
return 'A: ' + value;
}
});
$('#ex3').slider({
value : ex3Val,
reversed : true,
formatter: function(value) {
return 'B: ' + value;
}
});
$('#ex4').slider({
value : ex4Val,
reversed : true,
formatter: function(value) {
return 'C: ' + value;
}
});
$('#ex5').slider({
value : ex5Val,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex17').slider({
value : ex17Val,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex18').slider({
value : ex18Val,
reversed : true,
formatter: function(value) {
return 'D: ' + value;
}
});
$('#ex6').slider({
value : ex7Val + ex8Val + ex9Val + ex10Val,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex7').slider({
value : ex7Val,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex8').slider({
value : ex8Val,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex9').slider({
value : ex9Val,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex10').slider({
value : ex10Val,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex11').slider({
value : ex12Val + ex13Val + ex14Val + ex15Val,
formatter: function(value) {
return 'EFGH: ' + value;
}
});
$('#ex12').slider({
value : ex12Val,
reversed : true,
formatter: function(value) {
return 'E: ' + value;
}
});
$('#ex13').slider({
value : ex13Val,
reversed : true,
formatter: function(value) {
return 'F: ' + value;
}
});
$('#ex14').slider({
value : ex14Val,
reversed : true,
formatter: function(value) {
return 'G: ' + value;
}
});
$('#ex15').slider({
value : ex15Val,
reversed : true,
formatter: function(value) {
return 'H: ' + value;
}
});
$('#ex16').slider({
value :ex12Val + ex13Val + ex14Val + ex15Val,
formatter: function(value) {
return 'ABCDEFGH: ' + value;
}
});
// If you want to change slider main
$ex2.on("slide", function(evt) {
ex2Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
$ex3.on("slide", function(evt) {
ex3Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
$ex4.on("slide", function(evt) {
ex4Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
$ex5.on("slide", function(evt) {
ex5Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
$ex17.on("slide", function(evt) {
ex17Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
$ex18.on("slide", function(evt) {
ex18Val = evt.value;
$ex1.slider('setValue', (ex2Val + ex3Val + ex4Val + ex5Val + ex17Val + ex18Val));
});
// If you want to change slider main
$ex7.on("slide", function(evt) {
ex7Val = evt.value;
$ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val));
});
$ex8.on("slide", function(evt) {
ex8Val = evt.value;
$ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val ));
});
$ex9.on("slide", function(evt) {
ex9Val = evt.value;
$ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val ));
});
$ex10.on("slide", function(evt) {
ex10Val = evt.value;
$ex6.slider('setValue', (ex7Val + ex8Val + ex9Val + ex10Val));
});
// If you want to change slider main
$ex12.on("slide", function(evt) {
ex12Val = evt.value;
$ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
});
$ex13.on("slide", function(evt) {
ex13Val = evt.value;
$ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val ));
});
$ex14.on("slide", function(evt) {
ex14Val = evt.value;
$ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
});
$ex15.on("slide", function(evt) {
ex15Val = evt.value;
$ex11.slider('setValue', (ex12Val + ex13Val + ex14Val + ex15Val));
});
// TOP DOWN APPROACH
$ex1.on("slide", function(evt) {
$ex2.slider('setValue', evt.value - ex3Val - ex4Val - ex5Val - ex17Val - ex18Val, false);
$ex3.slider('setValue', evt.value - ex2Val - ex4Val - ex5Val - ex17Val - ex18Val, false);
$ex4.slider('setValue', evt.value - ex3Val - ex2Val - ex5Val - ex17Val - ex18Val, false);
$ex5.slider('setValue', evt.value - ex2Val - ex4Val - ex3Val - ex17Val - ex18Val, false);
$ex17.slider('setValue', evt.value - ex3Val - ex4Val - ex5Val - ex2Val - ex18Val, false);
$ex18.slider('setValue', evt.value - ex2Val - ex4Val - ex5Val - ex17Val - ex3Val, false);
});
$ex1.on("slideStop", function(evt) {
ex2Val = $ex2.slider('getValue');
ex3Val = $ex3.slider('getValue');
ex4Val = $ex4.slider('getValue');
ex5Val = $ex5.slider('getValue');
ex17Val = $ex17.slider('getValue');
ex18Val = $ex18.slider('getValue');
});
// TOP DOWN APPROACH
$ex6.on("slide", function(evt) {
$ex7.slider('setValue', evt.value - ex8Val - ex9Val - ex10Val, false);
$ex8.slider('setValue', evt.value - ex7Val - ex9Val - ex10Val, false);
$ex9.slider('setValue', evt.value - ex7Val - ex8Val - ex10Val, false);
$ex10.slider('setValue', evt.value - ex7Val - ex8Val - ex9Val, false);
});
$ex6.on("slideStop", function(evt) {
ex7Val = $ex7.slider('getValue');
ex8Val = $ex8.slider('getValue');
ex9Val = $ex9.slider('getValue');
ex10Val = $ex10.slider('getValue');
});
// TOP DOWN APPROACH
$ex11.on("slide", function(evt) {
$ex12.slider('setValue', evt.value - ex13Val - ex14Val - ex15Val, false);
$ex13.slider('setValue', evt.value - ex12Val - ex14Val - ex15Val, false);
$ex14.slider('setValue', evt.value - ex12Val - ex13Val - ex15Val, false);
$ex15.slider('setValue', evt.value - ex12Val - ex13Val - ex14Val, false);
});
$ex11.on("slideStop", function(evt) {
ex12Val = $ex12.slider('getValue');
ex13Val = $ex13.slider('getValue');
ex14Val = $ex14.slider('getValue');
ex15Val = $ex15.slider('getValue');
});