我创建了 5 个 slider ，当我们滑动它们时，它们的值会发生变化。现在我想将这些 slider 的值存储在一个变量中，以便我可以进行一些计算，例如添加所有 slider 的总值并打印它们。
这是我的代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider functionality</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-1" ).slider({
range:true,
min: 0,
max: 500,
values: [ 0, 0],
slide: function( event, ui ) {
$( "#priceA" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#priceA" ).val( "$" + $( "#slider-1" ).slider( "values", 0 ) +
" - $" + $( "#slider-1" ).slider( "values", 1 ) );
$( "#slider-2" ).slider({
range:true,
min: 0,
max: 500,
values: [ 0, 0],
slide: function( event, ui ) {
$( "#priceB" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#priceB" ).val( "$" + $( "#slider-2" ).slider( "values", 0 ) +
" - $" + $( "#slider-2" ).slider( "values", 1 ) );
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 500,
values: [ 0, 0],
slide: function( event, ui ) {
$( "#priceC" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#priceC" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
" - $" + $( "#slider-3" ).slider( "values", 1 ) );
$( "#slider-4" ).slider({
range:true,
min: 0,
max: 500,
values: [ 0, 0],
slide: function( event, ui ) {
$( "#priceD" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#priceD" ).val( "$" + $( "#slider-4" ).slider( "values", 0 ) +
" - $" + $( "#slider-4" ).slider( "values", 1 ) );
$( "#slider-5" ).slider({
range:true,
min: 0,
max: 500,
values: [ 0, 0],
slide: function( event, ui ) {
$( "#priceE" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#priceE" ).val( "$" + $( "#slider-5" ).slider( "values", 0 ) +
" - $" + $( "#slider-5" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for="priceA">Price rangeA:</label>
<input type="text" id="priceA"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-1"></div>
<p>
<label for="priceB">Price rangeB:</label>
<input type="text" id="priceB"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-2"></div>
<p>
<label for="priceC">Price rangeC:</label>
<input type="text" id="priceC"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-3"></div>
<p>
<label for="priceD">Price rangeD:</label>
<input type="text" id="priceD"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-4"></div>
<p>
<label for="priceE">Price rangeE:</label>
<input type="text" id="priceE"
style="border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id="slider-5"></div>
</body>
</html>
最佳答案
您可以使用 API 获取 slider 的值(或本例中的范围): http://api.jqueryui.com/slider/#option-values
这是一个 fiddle ，它对每个 slider 上范围顶部的值进行求和:
这是执行计算的代码部分:
function getValues() {
var total = 0;
$("div[id^='slider']").each(function () {
var values = $(this).slider("option", "values");
total += values[1];
});
$("#totals").text(total);
}
关于javascript - 如何将 slider 的值存储在变量中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25004416/