查看页面上的多个JQuery滑块

我已经成功地将多个jQueryUI滑块放置在一个页面及其转换文本上。您可以通过以下方式实时查看：

我的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> 

总体而言：


清洁：


设施：


地点：


服务质量：


房间：


货币价值：

您可以使用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" ) ] );
    });
});

---

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

$(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 ] );
        }
});