Question

我有一个带有来自jquery 1.12.1的普通jquery滑块的HTML页面但是滑块有2个手柄，我无法找到生成两个手柄的代码行。我删除了＆＃34;值[x，y]＆＃34;部分在我的HTML上的脚本，但它仍然提供两个句柄。我认为这是生成它的JavaScript，但我不熟悉JS，所以

    _createHandles: function() {
    var i, handleCount,
        options = this.options,
        existingHandles = this.element.find( ".ui-slider-handle" ),
        handle = "<span tabindex='0'></span>",
        handles = [];

    handleCount = ( options.values && options.values.length ) || 1;

    if ( existingHandles.length > handleCount ) {
        existingHandles.slice( handleCount ).remove();
        existingHandles = existingHandles.slice( 0, handleCount );
    }

    for ( i = existingHandles.length; i < handleCount; i++ ) {
        handles.push( handle );
    }

    this.handles = existingHandles.add( $( handles.join( "" ) ).appendTo( this.element ) );

    this._addClass( this.handles, "ui-slider-handle", "ui-state-default" );

    this.handle = this.handles.eq( 0 );

    this.handles.each( function( i ) {
        $( this )
            .data( "ui-slider-handle-index", i )
            .attr( "tabIndex", 0 );
    } );

我认为这是做某事的部分，但我无法理解它的变量;他们来自哪里。

for ( i = existingHandles.length; i < handleCount; i++ ) {
        handles.push( handle );
    }

如果有人知道如何删除这段代码，同时使句柄出现（我试图删除不同的行，但这不起作用），非常感谢您提前！

Answer 1

这是一个for循环，我认为只要i小于变量handleCount就会创建一个句柄。您需要更改变量handleCount，以便for循环只执行一次，从而创建一个句柄。

类似的东西：

handleCount = 1;

Answer 2

您只需删除range: true选项即可。

当删除它时，您只剩下一个只有1个手柄的滑块。

range：如果设置为true，滑块将检测您是否有两个手柄并在这两者之间创建一个可设置的范围元素。

http://api.jqueryui.com/slider/#option-range

此外，如果您只想要一个句柄，则应该只使用value属性，而不是values。

http://api.jqueryui.com/slider/#option-value

＆＃13;

$(function(){

//creates 2 handles
$( ".example-a" ).slider({
   range: true,
   values: [0]
});

//creates 1 handle slider
$( ".example-b" ).slider({
  values: [0]
});

//also creates 1 handle slider
$( ".example-c" ).slider({
  value: 0
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
 <h2>Example A - 2 handles<h2>
<div class="example-a"></div>

<h2>Example B - 1 handle (values)<h2>
<div class="example-b"></div>

<h2>Example C - 1 handle (value)<h2>
<div class="example-c"></div>

＆＃13;

Answer 3

好的，所以这是固定的，但有一件事仍然存在，那就是JS现在搜索另一个句柄来在两者之间的间距中创建一种颜色。

if ( !this.range || !this.range.length ) {
            this.range = $( "<div>" )
                .appendTo( this.element );

            this._addClass( this.range, "ui-slider-range" );
        } else {
            this._removeClass( this.range, "ui-slider-range-min ui-slider-range-max" );

            // Handle range switching from true to min/max
            this.range.css( {
                "left": "",
                "bottom": ""
            } );
        }
        if ( options.range === "min" || options.range === "max" ) {
            this._addClass( this.range, "ui-slider-range-" + options.range );
        }
    } else {
        if ( this.range ) {
            this.range.remove();
        }
        this.range = null;
    }
},

也许这是我必须重写的东西。我不知道。

// Handle range switching from true to min/max
        this.range.css( {
            "left": "",
            "bottom": ""

jquery单滑动手柄

3 个答案: