爲什麼我的滑塊工具提示在開始時不顯示文本？

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/