我正在编写一个 Web 应用程序，它通过 JavaScript 更新一些 jQuery UI slider 。我在初始化后更新 slider 时遇到了很多问题，但解决了大部分问题。以下问题仍未解决，我没有看到泄漏。
第一个 slider 是将检查其值的引用 slider 。第二个和第三个 slider 表示访问者可以在网站上进行的动态更改，这些更改会导致引用 slider 的范围变化。不幸的是，在我更新第二个和/或第三个 slider 后，我无法回到最小 0 或最大 100 一次。最小值为 1，最大值为 99。
以下代码包含一个功能齐全的演示来重现此问题。代码与命名相同。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slider Demo</title>
<style type="text/css">
.slider { margin: 20pt 10pt; }
#log { height: 100pt; overflow: auto; border: 1pt solid silver; }
</style>
</head>
<body>
<h1>jQuery Slider Demo</h1>
<strong>Range: <var id="slider-value"></var></strong>
<div id="slider" class="slider"></div>
<strong>Minimum: <var id="slider-min-value"></var></strong>
<div id="slider-min" class="slider"></div>
<strong>Maximum: <var id="slider-max-value"></var></strong>
<div id="slider-max" class="slider"></div>
<strong>Log:</strong>
<pre id="log" class="slider"></pre>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Application -->
<script type="text/javascript">
function log (msg) {
$('#log').html( msg + "\n" + $('#log').html() );
}
function _newrange ( slider, min, max, reset ) {
if ( reset ) reset = true; else reset = false;
if ( slider == null || slider.slider() == null ) {
log( 'slider parameter is not a slider' );
return false;
}
if ( min == null || /^[0-9]+$/.exec(min) == null ) {
log( 'min parameter is not a number' );
return false;
}
if ( max == null || /^[0-9]+$/.exec(max) == null ) {
log( 'max parameter is not a number' );
return false;
}
var oldmin = slider.slider( 'option', 'min' );
var oldmax = slider.slider( 'option', 'max' );
var oldvalmin = slider.slider( 'values', 0 );
var oldvalmax = slider.slider( 'values', 1 );
var newvalmin = min;
var newvalmax = max;
if ( !reset ) {
if ( newvalmin >= min ) newvalmin = oldvalmin;
if ( newvalmax <= max ) newvalmax = oldvalmax;
if ( oldvalmin == oldmin ) newvalmin = min;
if ( oldvalmax == oldmax ) newvalmax = max;
}
slider.slider( 'option', 'min', min );
slider.slider( 'option', 'max', max );
slider.slider( 'option', 'values', [ newvalmin, newvalmax ] );
log( 'new slider range from minimum ' + min + ' up to maximum ' + max );
return false;
}
function newrange () {
_newrange(
$('#slider'),
$('#slider-min').slider( 'value' ),
$('#slider-max').slider( 'value' )
);
$('#slider-value').html( $('#slider').slider( 'values', 0 ) + ' - ' + $('#slider').slider( 'values', 1 ) );
$('#slider-min-value').html( $('#slider-min').slider( 'value' ) );
$('#slider-max-value').html( $('#slider-max').slider( 'value' ) );
}
$(document).ready(function(){
$('#slider-min').slider({
range: 'min',
min: 0,
max: 49,
value: 0,
slide: function( event, widget ) { newrange(); }
});
$('#slider-max').slider({
range: 'max',
min: 50,
max: 100,
value: 100,
slide: function( event, widget ) { newrange(); }
});
$('#slider').slider({
range: true,
min: $('#slider-min').slider( 'option', 'min' ),
max: $('#slider-max').slider( 'option', 'max' ),
values: [ $('#slider-min').slider( 'option', 'min' ), $('#slider-max').slider( 'option', 'max' ) ],
slide: function( event, widget ) {
$('#slider-value').html( widget.values[0] + ' - ' + widget.values[1] );
log( 'new slider values from ' + widget.values[0] + ' up to ' + widget.values[1] );
}
});
newrange();
});
</script>
</body>
</html>
最佳答案
在 this dem 中的 jQuery slider 中看起来像是一个错误o slider 的最小值是 1 而不是 0，向右移动 1 点给出值 0
<strong>Minimum: <var id="slider-min-value"></var></strong>
<div id="slider-min" class="slider"></div>
和
$('#slider-min').slider({
range: 'min',
min: 0,
max: 49,
value: 0,
slide: function( event, widget ) {
$('#slider-min-value').html( $('#slider-min').slider( 'value' ) );
//newrange();
}
});
关于javascript - 如何正确处理 jQuery UI slider ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17064180/