我在 Jquery 中使用 javascript 函数时遇到问题。我想获取 jquery SLIDER 的最大值和最小值。请帮忙。
这是标记。
$(document).ready(function() {
这是函数MAX
function getMax()
{
var options = document.getElementById('.price_range').childNodes;
var min = 999999999;
for(var i = 0; i < options.length; i++) {
if(options[i].value > max) max = options[i].value;
}
return max;
}
这是函数 MIN
function getMin()
{ var options =document.getElementById('my_max').childNodes;
var min = 999999999;
for(var i = 0; i < options.length; i++) {
if(options[i].value < min) min = options[i].value;
}
return min;
}
滑块函数来了,它必须从 javascript 函数中获取最小值和最大值
// Slider
$('#slider').slider({
range: true,
min: getMin(),
max: getMax(),
step: 10, // Use this determine the amount of each interval
values: [ 20, 40 ], // The default range
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] ); // for input text box
$( "#my_min" ).val(ui.values[ 0 ]); // Display and selected the min Price
$( "#my_max" ).val(ui.values[ 1 ]); // Display and selected the max Price
}
});
//For dropdown box
$( "#my_min" ).val($( "#slider" ).slider( "values", 0 ));
$( "#my_max" ).val($( "#slider" ).slider( "values", 1 ));
$("select.price_range").change(function () {
$myMinValue = $("#my_min option:selected").val();
$myMaxValue = $("#my_max option:selected").val();
//Make changes on the slider itself
if($myMinValue <= $myMaxValue) {
$( "#slider" ).slider({
values: [$myMinValue, $myMaxValue]
});
} else {
alert("Invalid Input");
}
});
});
这是 index.html
<body>
<select id="my_min" class="price_range">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select id="my_max" class="price_range">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select
><!-- Slider -->
<h2 class="demoHeaders">Slider</h2>
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;">