Wordpress メタボックスで 6 つの jQuery UI スライダーを取得しました。値を取得し、平均をテキスト入力フィールド (#pm_overall_score) に出力しました。これは、これを処理する JS です。
var sum = 0 ;
var nums = 0;
$('.rwmb-slider').bind({
slidechange : function(event,ui) {
sum = 0;
nums = 0;
$('.rwmb-slider').each(function(){
var value = $( this ).slider( "option", "value" );
if(value != 0 )
{
sum += value ;
nums++;
}
});
var avg = sum / nums ;
$('#pm_overall_score').val(Math.floor(avg));
console.log(avg);
}
}).slider();
値を保存すると、ページのリロード時にテキスト入力に膨大な数が表示され、なぜこれが起こっているのか、その背後にある数学が理解できないことを除いて、うまく機能します。
例:
最初のスライダー > 値 5、2
番目のスライダー > 値 15
正しい平均(10)を保存しますが、ページのリロード時に入力フィールドに257が表示されます。3 番目のスライダーを10に移動すると、数値は17170 (??) になります。再び機能させるには、すべてのスライダーを 0 に戻す必要があります。私はjQueryの専門家ではありませんが、なぜこれが起こっているのか、平均計算の代替案はありますか?
ありがとう
編集: 役立つ場合は、スライダーを処理するコードも投稿します。
jQuery( document ).ready( function( $ )
{
var
id = null
, el = null
, input = null
, label = null
, format = null
, value = null
, update = null
;
$( '.rwmb-slider' ).each( function( i, val )
{
id = $( val ).attr( 'id' );
el = $( '#' + id );
input = $( '[name=' + id + ']' );
label = $( '[for=' + id + ']' );
format = $( el ).attr( 'rel' );
$( label ).append( ': <span id="' + id + '-label"></span>' );
update = $( '#' + id + '-label' );
if (
!$( input ).val()
|| 'undefined' === $( input ).val()
|| null === typeof $( input ).val()
)
{
$( input ).val( $( el ).slider( "values", 0 ) );
$( update ).text( "0" );
}
else
{
value = $( input ).val();
$( update ).text( value );
}
if ( 0 < format.length )
$( update ).append( ' ' + format );
el.slider(
{
value: value,
slide: function( event, ui )
{
$( input ).val( ui.value );
$( update ).text( ui.value + ' ' + format );
}
} );
} );
} );