Question

我正在使用Wordpress Meta Box插件（https://github.com/rilwis/meta-box）在帖子页面上放置六个jQuery UI滑块。

问题是jQuery中必须有一个错误来处理我找不到的滑块：每当我放置多个滑块时，它会更新页面中最后一个滑块的值而不是正确的滑块。仅在页面中有1个滑块才能正常工作，或者如果我重复代码六次（每个类一次），这显然我不想这样做。

示例：

我移动 pm_slider_c1 ＆gt;更新 pm_rating_c6-label span

这是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>

这四天我对此感到头疼（我不是jQuery专家），所以任何帮助都会非常感激。

谢谢你们

Answer 1

偶然发现这个问题试图解决类似的问题。

供任何人参考：问题是每次创建滑块时都会重置输入和更新值（对于每个（）循环的每次迭代都会重置。

因此，当任何ui滑块对象检测到滑动事件时，它使用您为“input”和“update”设置的最后值调用以下逻辑

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

解决方案是使用jquery这个对象 $（this）作为选择器的根。

E.G。

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

有可能有一种更有效的方式来写这个，但它解决了问题的根源。

多个jQuery UI滑块更新错误的值

1 个答案: