jquery-ui - 添加显示多个 jQuery UI 滑块平均值的文本输入

Question

我有几个使用此代码的 jQueryUI 滑块：

jQuery(document).ready(function ($)
{
    $( '.rwmb-slider' ).each( function() {

        var $this = $( this ),
            $input = $this.siblings( 'input' ),
            $valueLabel = $this.siblings( '.rwmb-slider-value-label' ).find( 'span' ),
            value = $input.val(),
            options = $this.data( 'options' );

        if ( !value )
        {
            value = 0;
            $input.val( 0 );
            $valueLabel.text( '0' );
        }
        else
        {
            $valueLabel.text( value );
        }

        // Assign field value and callback function when slide
        options.value = value;
        options.slide = function( event, ui )
        {
            $input.val( ui.value );
            $valueLabel.text( ui.value );

        };

        $this.slider( options );    

    });

});

JSFIDDLE：http: //jsfiddle.net/q2BwE/

一切正常，但我正在努力在此代码中集成一个函数，该函数允许我在文本输入中显示滑块的平均值，其值不同于“0”。

你们能帮帮我吗？谢谢

Answer 1

这是一种方法：jsFiddle 示例。

我添加了一个文本字段 ( <input name="average" type="text" readonly />) 以显示在任何滑块完成移动后计算的平均值。然后我添加了以下代码来进行计算：

options.change = function (event, ui) {
    var avg = 0;
    var div = 0;
    $('.rwmb-slider').each(function () {
        avg += ($(this).slider('value'));
        if($(this).slider('value')>0)div++
    })
    $('input[name=average]').val(avg/div);
};