1

我正在尝试对工作中的 jQuery UI 滑块进行小幅更改，以便第一个滑块的第一个值向用户显示“全部”而不是“0”。

我尝试根据这篇文章Jquery ui slider with string values 中的示例更改滑块？但是我目前无法获得有效的解决方案。

我的代码目前看起来像这样：

<script>
$(function() {
    $("#peopleSlider").slider({
       min: 0,
       max: 10, 
       value: 0,
       animate: true,
       slide: function(event, ui) {
       $( "#people" ).val( ui.value );
          var top_value_str = ui.value>=99 ? ui.value+'+' : ui.value;
          $("#peopleSlider .tab-note:first").text(top_value_str);
       }
    });

   $("#yearSlider").slider({
       min: 2013,
       max: 2015, 
       value: 2013,
       animate: true,
       slide: function(event, ui) {
       $( "#year" ).val( ui.value );
          var top_year_str = ui.value>=2099 ? ui.value+'+' : ui.value;
          $("#yearSlider .tab-note:first").text(top_year_str);
       }
    });

    $('.ui-slider-horizontal .ui-slider-handle').append('<span class="tab-note"></span>').mousedown(function(e) { e.preventDefault(); });
    $( "#people" ).val( $( "#peopleSlider" ).slider( "value" ) );
    $( "#year" ).val( $( "#yearSlider" ).slider( "value" ) );

    // Set default values - for sale
    var for_sale_init_bed_slide_val = $("#peopleSlider").slider("value");
    var for_sale_top_value_str = for_sale_init_bed_slide_val>=99 ? for_sale_init_bed_slide_val+'+' : for_sale_init_bed_slide_val;
    $("#peopleSlider .tab-note:first").text(for_sale_top_value_str);
    var for_sale_init_year_slide_val = $("#yearSlider").slider("value");
    var for_sale_top_year_str = for_sale_init_year_slide_val>=2099 ? for_sale_init_year_slide_val+'+' : for_sale_init_year_slide_val;
    $("#yearSlider .tab-note:first").text(for_sale_top_year_str);

});

我想将#peopleSlider 的最小值更改为显示“全部”而不是“0”。我添加了 var 步骤：

    var steps = [
    "All",
    "0",
    "1",
    "2",
    "3",
    "4",
    "5",
    "6",
    "7",
    "8",
    "9",
    "10"
];

但我不完全确定如何/在哪里将“步骤”功能添加到滑块脚本中？

--

工作解决方案

$("#peopleSlider").slider({
    min: 0,
    max: 10, 
    value: 0,
    animate: true,
    slide: function(event, ui) {
        $( "#people" ).val( ui.value );
        var top_value_str = ui.value >= 99 ? ui.value +'+' : ui.value;
        if(top_value_str < 1) {
            //div of text that is being displayed
            $("#peopleSlider .tab-note").text("Any");
        } else {
            //div of text that is being displayed
            $("#peopleSlider .tab-note").text(top_value_str);
        }
    }
});
4

1 回答 1

0

这是我到目前为止所拥有的。看来您混淆了div。没有看到你的 html 有点难以回答。无论如何，请尝试下面的代码，替换您当前的代码。

希望这可以帮助

$("#peopleSlider").slider({
   min: 0,
   max: 10, 
   value: 0,
   animate: true,
   slide: function(event, ui) 
   {
        var slidervalue = $("#peopleSlider").slider("value");//div of actual slider
        if(slidervalue < 1)
        {
            $("#people").text("All");//div of text that is being displayed
        }else{
            $("#people").text(slidervalue);//div of text that is being displayed
        }
   }
});
于 2013-08-15T13:52:02.787 回答