Question

我已成功在页面上放置多个jquery ui滑块及其transalation文本。你可以查看它： http://outsourcingnepal.com/projects/jQuery%20slider/

我的jquery代码为：

var arrLabel1 = new Array('Not Good', 'OK', 'Average', 'Above Average', 'Excellent', 'Outstanding');
$(function() {
    $( ".slider_control" ).slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            $( "#slider_" + $(this).attr('rel') ).val( ui.value );
            $( "#label_" + $(this).attr('rel') ).text( arrLabel1[ ui.value ] );
        }
    }).each(function(index){
        $( "#slider_" + (index + 1) ).val( $( this ).slider( "value" ) );
        $( "#label_" + (index + 1) ).text( arrLabel1[ $(this).slider( "value" ) ] );
    });
});

现在我想优化它，以便我可以独立于rel属性。

我的HTML：

<ul class="slider-container"> 
    <li class="ui_slider"> 
        <div class="title">Overall: <span id="label_1"></span></div> 
        <input type="hidden" name="overall_review" id="slider_1" /> 
        <div class="slider_control" rel="1"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Cleanliness: <span id="label_2"></span></div> 
        <input type="hidden" name="overall_review" id="slider_2" /> 
        <div class="slider_control" rel="2"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Facilities: <span id="label_3"></span></div> 
        <input type="hidden" name="overall_review" id="slider_3" /> 
        <div class="slider_control" rel="3"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Location: <span id="label_4"></span></div> 
        <input type="hidden" name="overall_review" id="slider_4" /> 
        <div class="slider_control" rel="4"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Quality of Service: <span id="label_5"></span></div> 
        <input type="hidden" name="overall_review" id="slider_5" /> 
        <div class="slider_control" rel="5"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Room: <span id="label_6"></span></div> 
        <input type="hidden" name="overall_review" id="slider_6" /> 
        <div class="slider_control" rel="6"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Value of Money: <span id="label_7"></span></div> 
        <input type="hidden" name="overall_review" id="slider_7" /> 
        <div class="slider_control" rel="7"></div> 
    </li> 
</ul>

Answer 1

您可以使用jQuery的遍历方法

var arrLabel1 = new Array('Not Good', 'OK', 'Average', 'Above Average', 'Excellent', 'Outstanding');
$(function() {
    $( ".slider_control" ).slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            $(this).siblings('input:hidden').val( ui.value );
            $(this).siblings('.title').children('span').text( arrLabel1[ ui.value ] );
        }
    }).each(function(index){
        $(this).siblings('input:hidden').val( $( this ).slider( "value" ) );
        $(this).siblings('.title').children('span').text( arrLabel1[ $(this).slider( "value" ) ] );
    });
});

Answer 2

您可以将每个输入分别绑定到它们的滑块一次，然后只在需要时使用该引用，如

$(function() {
    $( ".slider_control" ).each(function(index) {
        var $input = ( this._input = $(this).siblings('input:hidden') ); // same for the title
        $input.val( $(this).slider( "value" ) );
        $input.text( arrLabel1[ $(this).slider( "value" ) ] );
    })
    .slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            this._input.val( ui.value ); //same for the title
            this._input.text( arrLabel1[ ui.value ] );
        }
});

在页面上查看我的多个JQuery Slider

2 个答案: