我正在研究this demo 。为什么我无法在悬停时将工具提示添加到处理程序?
$("#slider-range").slider({
range: true,
step: 5,
min: 100,
max: 500,
values: [150, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').hover(
function () {
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}, function () {
});
当我在 slide:
中使用它们时,html()
方法工作正常,但我只需要在悬停时显示它们。
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}
最佳答案
我检查了你的代码。它有很多问题。首先,您的悬停功能中没有 ui 对象。因此,您无法访问它。仅当鼠标进入和鼠标离开发生时才会触发悬停事件。因此,您必须将悬停功能放在幻灯片功能内,以在拖动 handle 时显示变化的值。我还添加了一些其他修改。
修改后的Javascript:
$("#slider-range").slider({
range: true,
step: 5,
min: 100,
max: 500,
values: [150, 300],
slide: function (event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + '</div></div>');
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$( ".ui-slider-handle" ).mouseleave(function() {
$('.ui-slider-handle').html("");
})
$( ".ui-slider-handle" ).mouseenter(function() {
var value = $( "#slider-range" ).slider( "option", "values" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[0] + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + value[1] + '</div></div>');
})
关于javascript - 如何使用 Bootstrap Tooltip 在悬停时向 jQuery UI Slider 添加工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22393147/