为什么我的滑块工具提示在开始时不显示文本?

时间:2017-08-06 08:31:53

标签: javascript jquery

我有三个滑块:

<div class="container">
  <div class="row" id="time" >
    <div class="col-xs-4">
      Days: <b>1</b> <input id="days" type="text" class="span2" value="" data-slider-min="1" data-slider-max="31" data-slider-step="1" data-slider-value="[0,31]"/> <b>31</b>
    </div>
    <div class="col-xs-4">
      Months: <b>January</b> <input id="months" type="text" data-provide="slider" data-slider-step="1" data-slider-min="0" data-slider-max="11" data-slider-tooltip="show" data-slider-value="[0,12]" /> <b>December</b>
    </div>
    <div class="col-xs-4">
      Years: <b>0</b> <input id="years" type="text" class="span2" value="" data-slider-min="0" data-slider-max="2017" data-slider-step="1" data-slider-value="[0,2017]"/> <b>Today</b>
    </div>
  </div>
</div>

我使用以下js注意它做了很多事情,但我们只是在寻找daysyears的工具提示问题

var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
$("#days, #years").slider({
  tooltip: 'always',
}); 
$("#days").slider({
  formatter: function(value) {
    return 'Days: ' + value;
  }
});
$("#years").slider({
  formatter: function(value) {
    return 'Years: ' + value;
  }
});
$("#months").slider({
  tooltip: 'always',
  value: [0, 12],
  tooltip: 'always',
  formatter: function(value) {
     return months[value[0]] + " : " + months[value[1]];
  },
});
$("input").on("slide", function(slideEvt) {
    getData();
});
getData = function() {
    var data = [];
    for (var i = 0; i < 2; i++) {
        data.push({
            day: $('#days').slider().val().split(',')[i], 
            month: months[$('#months').slider().val().split(',')[i]-1],
            year: $('#years').slider().val().split(',')[i], 
        }) ;
    }  
    console.log(data);
}

在滑块日期和年份的范围编号之前,它应显示(示例)Days: 22:16Years 1200:1985,但标签DaysYears仅在我们开始后显示与滑块交互但在加载时没有开始

JsFiddle here

2 个答案:

答案 0 :(得分:2)

好的,在检查滑块的unminified源代码后,看起来需要进行额外的“刷新”调用,因为在初始化阶段没有调用formatter。只需拨打relayout,就像这样:

$("#days").slider({
  formatter: function(value) {
    return 'Days: ' + (value instanceof Array ? value.join(':'): value);
  }
}).slider('relayout');

$("#years").slider({
  formatter: function(value) {
    return 'Years: ' + (value instanceof Array ? value.join(':'): value);
  }
}).slider('relayout');

更新https://jsfiddle.net/pz3ce0o6/1340/

答案 1 :(得分:2)

当您初始化两次时会出现问题。

删除此

$("#days, #years").slider({
     tooltip: 'always',
}); 

$("#days").slider({
  formatter: function(value) {
    return 'Days: ' + value;
  }
});

$("#years").slider({
  formatter: function(value) {
    return 'Years: ' + value;
  }
});

替换为

$("#days").slider({
  tooltip: 'always',
  formatter: function(value) {
    return 'Days: ' + value; //return ('Days: ' + value).replace(",", ":");
  }
});

$("#years").slider({
  tooltip: 'always',
  formatter: function(value) {
    return 'Years: ' + value; //return ('Years: ' + value).replace(",", ":");
  }
});

https://jsfiddle.net/uo821Lzw/

更新:将冒号替换为冒号https://jsfiddle.net/5w3zms3h/