2

我正在编写一个通过 JavaScript 更新一些 jQuery UI 滑块的网络应用程序。我在初始化后更新滑块时遇到了很多问题，但解决得最多。以下问题仍然存在，我没有看到泄漏。

第一个滑块是参考滑块，将检查其值。第二个和第三个滑块代表访问者可以在网站上进行的导致参考滑块范围变化的动态变化。不幸的是，在更新第二个和/或第三个滑块后，我无法恢复到最小值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>
4

2 回答 2

0

是我的错。我以为这次slide活动会给我新的价值观，但事实并非如此。slide返回旧值。stop是我需要的事件。

于 2013-07-03T13:58:08.517 回答
0

看起来像 jQuery 滑块中的一个错误，在这个演示中，滑块的最小值是 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();
    }
});
于 2013-06-12T12:56:54.230 回答