2

document.querySelectorAll( '.js-slider' ); で定義された複数のスライダーがあります。tooltips.format で、データ ラベルを介して現在のスライド オブジェクトで定義されている値の上にラベルを挿入したいと思います。

初期化では、これは正常に機能します。

しかし、更新時に、最後に初期化されたスライダー ラベルを取得します。これは明らかです :) しかし、現在のスライダー オブジェクトまたは ID を tooltips.format 内または update イベント内で取得したり、現在のスライダーの設定オブジェクトを取得したりできますか?

var uiSlider = {
init : function() {
    var rangeInputs = document.querySelectorAll( '.js-slider' );
    uiSlider.setup( rangeInputs );
},
setup : function( sliders ) {
    var len = sliders.length,
        slider, min, max, step, value, range, start, postfix, pipValues, label, settings;

    function data( element , value ){
        return parseFloat( element.getAttribute( 'data-' + value ) );
    }

    while( len-- ) {            
        slider = sliders[len];                  
        min = data( slider,'min' );
        max = data( slider,'max' );
        step = data( slider,'step' );
        value = data( slider, 'value' );
        range = !isNaN( min ) && !isNaN( max ) ? { 'min': min, 'max': max } : { 'min': 0, 'max': 100 };
        start = !isNaN( value ) ? value : 0;
        postfix = slider.getAttribute( 'data-postfix' );
        pipValues = slider.getAttribute( 'data-pipvalues' ) ? slider.getAttribute( 'data-pipvalues' ).split( ',' ) : null;
        label =  slider.getAttribute( 'data-label' );
        settings = {
            start: start,
            step: !isNaN( step ) ? step : 1,
            connect: "lower",
            tooltips: {
                format: function( value, handle, settings ) {

                    var dformat = wNumb({
                        decimals: 0,
                        thousand: ',',
                        prefix: '<span class="noUi-tooltip__label">' + label + '</span>',
                        postfix: ( postfix ? ' ' + postfix : ' $' )
                    }); 

                    return dformat.to( parseFloat( value ) );
                }
            },
            range: range,
            pips: { // Show a scale with the slider
                mode: 'positions',
                values: pipValues ? pipValues : [ 0, 20, 40, 60, 80, 100 ],
                density: 2,
                format: wNumb({
                    decimals: 0,
                    thousand: ','
                })
            },
            format: wNumb({
                decimals: 0
            })
        };

        noUiSlider.create( slider, settings );

    }
}
};

uiSlider.init();

これを理解することはできませんでした。

問題の実行中の Fiddel はここで見ることができます: Fiddle

4

1 に答える 1

0

これは、すべてのスライダー間で「ラベル」変数を共有しているために発生します。

コードをリファクタリングして、すべてのスライダーの初期化をクロージャーlabelで実行する場合、各スライダーに固有の変数を使用できます。

これを行う最も簡単な方法はforEach、スライダーのリストに追加することです。たとえば、Array.prototype.forEach.call(sliders, function (slider));

あなたのコードはリファクタリングされました:

var uiSlider = {
    init : function() {
        var rangeInputs = document.querySelectorAll( '.js-slider' );
        uiSlider.setup( rangeInputs );
    },
    setup : function( sliders ) {

        function data( element , value ){
            return parseFloat( element.getAttribute( 'data-' + value ) );
        }

        Array.prototype.forEach.call(sliders, function ( slider ) {

            var min = data( slider,'min' ),
                max = data( slider,'max' ),
                step = data( slider,'step' ),
                value = data( slider, 'value' ),
                range = !isNaN( min ) && !isNaN( max ) ? { 'min': min, 'max': max } : { 'min': 0, 'max': 100 },
                start = !isNaN( value ) ? value : 0,
                postfix = slider.getAttribute( 'data-postfix' ),
                pipValues = slider.getAttribute( 'data-pipvalues' ) ? slider.getAttribute( 'data-pipvalues' ).split( ',' ) : null,
                label =  slider.getAttribute( 'data-label' );

            noUiSlider.create(slider, {
                start: start,
                step: !isNaN( step ) ? step : 1,
                connect: "lower",
                tooltips: {
                    format: function( value, handle, settings ) {

                        var dformat = wNumb({
                            decimals: 0,
                            thousand: ',',
                            prefix: '<span class="noUi-tooltip__label">' + label + '</span>',
                            postfix: ( postfix ? ' ' + postfix : ' $' )
                        }); 

                        return dformat.to( parseFloat( value ) );
                    }
                },
                range: range,
                pips: { // Show a scale with the slider
                    mode: 'positions',
                    values: pipValues ? pipValues : [ 0, 20, 40, 60, 80, 100 ],
                    density: 2,
                    format: wNumb({
                        decimals: 0,
                        thousand: ','
                    })
                },
                format: wNumb({
                    decimals: 0
                })
            });
        });
    }
};

uiSlider.init();

そして更新されたjsFiddle。

于 2015-10-29T11:08:32.277 に答える