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

Question

我有三个滑块：

<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（注它做很多事情，但我们只是在寻找的days和years的工具提示问题）。

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:16和Years 1200:1985但Days和Years出现之后，才会开始与滑块交互的标签，但不是在一开始的时候，我们加载

JsFiddle here

Answer 1

OK，检查它看起来像，需要有一个额外的“刷新”滑块的unminified源代码后呼叫，因为格式不被称为在初始化阶段。只需拨打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/

Answer 2

问题发生在你的init两次。

删除此

$("#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/