我有一個滑塊和一個小的輸入文本框，它根據你滾動的位置來更新。
這里是javascript：
$(function(/span>) {
var tooltip = $('<div id="tooltip" /> ').css({
position: 'absolute',
top: -25,
left: -10.
}).hide（）。
$("#client-slider"/span>).slider({
range: "min",
value: 30,
min: 15,
max: 300,
slide: function(event, ui) {
$('#client').val(ui.value).trigger("change") 。
tooltip.text（ui.value）。
},
change: function(event, ui) {}.
}).find(".ui-slider-handle").append（工具提示）。 hover（function() {
tooltip.show（）。
}, function() {
tooltip.hide()。
});
});
$("#client").val($("#client-slider") 。 slider("value"))。
而這里是html/css:
< input type="text"/span> id="client"/span> style="width: 50px;text-align:center"/>
<div id="slider"> </div>>
我收到一個錯誤，無法在我的滑塊上顯示工具提示
。***請注意，這不是任何現有問題的重復--我曾試圖從這個答案中獲得幫助，但都是徒勞的
uj5u.com熱心網友回復：
從舊的帖子中獲取答案通常是個壞主意。這種實作方式更符合時代的要求，也更不復雜：
。document.getElementById("slider"/span>) 。 addEventListener("input", function(event) {
document.getElementById(" budget")。 value = event.target.value。
})< input type="text"/span> id="預算" style="width: 50px;text-align:center"/>
< input id="slider" type="range" min="15" max="300" value="15"/> 完整的代碼：
< input type="text"/span> id="預算" style="width: 50px;text-align:center"/>
< input id="slider" type="range" min="15" max="300" value="15"/>
<script type="text/javascript">/span>
document.getElementById("slider") 。 addEventListener("input", function(event) {
document.getElementById(" budget")。 value = event.target.value。
})
</script>>
對于基于這個答案的JQUERY實作：
。 var tooltip = $('<div id="tooltip" /> ' ).css({
position: 'absolute',
top: -25,
left: -10.
}).hide（）。
$("#slider"/span>).slider({
value: 500,
min: 0,
max: 1000,
step: 50,
slide: function(event, ui) {
tooltip.text((ui.value/1000)*100 "%"/span>)。
$( "#client" ).val((ui. value/1000）*100 "%"）。)
},
change: function(event, ui) {}.
}).find(".ui-slider-handle").append（工具提示）。 hover（function() {
tooltip.show()
}, function（） {
tooltip.hide()
})< link rel="styleheet" href="https: //ajax. googleapis.com/ajax/libs/jqueryui/1.9.2/themes/smoothness/jquery-ui.css">/span>
< input type="text" id="client"/span> style="width: 50px;text-align:center"/>
<div id="slider" style="margin: 50px"></div>>
<!-- 獲取ajax -->
<script src="https://ajax. googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">< /script>
<script src="https://ajax.googleapis. com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 在fiddle上也試試。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/319955.html
標籤：