Question

我正在编写一个web应用程序，通过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>

Answer 1

看起来像jQuery滑块中的一个错误，在this dem中，滑块的最小值是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();
    }
});

Answer 2

这是我的错。我认为slide事件会给我新值，但事实并非如此。 slide返回旧值。 stop是我需要的事件。

如何正确处理jQuery UI滑块？

2 个答案: