0

Wordpress Meta Box プラグイン ( https://github.com/rilwis/meta-box ) を使用して、投稿ページに 6 つの jQuery UI スライダーを配置しています。

問題は、見つからないスライダーを処理する jQuery にエラーがあることです。複数のスライダーを配置するたびに、正しいスライダーではなく、ページの最後のスライダーの値が更新されます。ページ内の 1 つのスライダーでのみ正常に動作します。または、コードを 6 回 (クラスごとに 1 回) 繰り返すと、明らかにやりたくありません。

例：

pm_slider_c1を移動> pm_rating_c6-labelスパンを更新

JSコードは次のとおりです。

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 );
                }
            } );
    } );
} );

単一のスライダーの HTML:

<div class="rwmb-field rwmb-slider-wrapper">
    <div class="rwmb-label">
        <label for="pm_rating_c1">Rating: 
            <span id="pm_rating_c1-label">0</span><!-- GENERATED FROM JS -->
        </label>
    </div>

    <div class="rwmb-input">
        <div class="clearfix">
            <div class="rwmb-slider" id="pm_rating_c1"></div>
            <input type="hidden" name="pm_rating_c1" value="0">
        </div>
    </div>
</div>

これについて頭痛の種が4日間あります（私はjQueryの専門家ではありません）ので、どんな助けでも大歓迎です。

みんなありがとう

4

1 に答える 1

0

同様の問題を解決しようとして、この質問に出くわしました。

参考までに: 問題は、スライダーが作成されるたびに (each() ループの反復ごとに) 入力値と更新値がリセットされることです。

したがって、任意の ui スライダー オブジェクトがスライド イベントを検出すると、'input' と 'update' に設定した最後の値を使用して次のロジックを呼び出します。

$( input ).val( ui.value );
$( update ).text( ui.value + ' ' + format );

解決策は、jquery this object $(this)をセレクターのルートとして使用することです。

例えば

el.slider(
            {
                value: value,
                slide: function( event, ui )
                {
                    $(this).find("input").val( ui.value );
                    $(this).closest("label").text( ui.value + ' ' + format );
                }
            } );

これを記述するより効率的な方法がある可能性がありますが、それは問題の根本に対処します。

于 2013-10-22T07:02:08.917 に答える