0

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

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

例子：

我移动pm_slider_c1 > 更新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 专家），所以任何帮助都将不胜感激。

多谢你们

4

1 回答 1

0

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

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

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

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

解决方案是使用 jquery this 对象$(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 回答