Question

我有一个jquery rangelider，我想要一个显示在两个句柄上的工具提示。我的代码如下，并改编自http://jsfiddle.net/b6tux4we/我只想一次显示一个工具提示。

但对我来说，第一个滑块手柄上的工具提示不会出现。第二个做，并且工作正常。为什么？我该如何解决？

提前致谢。

var tooltipmin_blobSpeed = $("<div style='font-weight:bold; border: 1px solid black;border-radius:4px; background-color:black; color:white; padding:3px' id='tooltip' />").css({
    position: 'absolute',
    top: -30,
    left: -5
}).hide();
var tooltipmax_blobSpeed = $("<div style='font-weight:bold; border: 1px solid black;border-radius:4px; background-color:black; color:white; padding:3px' id='tooltip' />").css({
    position: 'absolute',
    top: -30,
    left: -5
}).hide();  

var blobSpeedSlider = $( "#slider_blobSpeed" ).slider({
    range: true,
    min: 0,
    max: 10,
    values: [ 1, 10 ],
    slide: function( event, ui ) {
        blobSpeedMinimum[currentblob] = ui.values[0]
        blobSpeedMaximum[currentblob] = ui.values[1]

        tooltipmin_blobSpeed.text(ui.values[0])
        tooltipmax_blobSpeed.text(ui.values[1])

    },
    change: function( event, ui ) {
        tooltipmin_blobSpeed.text(ui.values[0])
        tooltipmax_blobSpeed.text(ui.values[1])
    }       
})

$( "#slider_blobSpeed") 
    .find("ui-slider-handle")
    .first()
    .append(tooltipmin_blobSpeed)
    .hover(function() {
        tooltipmin_blobSpeed.show();
    }, function() {
        tooltipmin_blobSpeed.hide();
})

$( "#slider_blobSpeed") 
    .find(".ui-slider-handle")
    .last()
    .append(tooltipmax_blobSpeed)
    .hover(function() {
        tooltipmax_blobSpeed.show();
    }, function() {
        tooltipmax_blobSpeed.hide();
});

Answer 1

无论出于何种原因，有必要搜索span而不是span类，否则，工具提示HTML不会被插入......

所以，而不是

$( "#slider_blobSpeed") 
.find(".ui-slider-handle")
.last()
.append(tooltipmax_blobSpeed)
.hover(function() {
    tooltipmax_blobSpeed.show();
}, function() {
    tooltipmax_blobSpeed.hide();
});

这样做：

$( "#slider_blobSpeed") 
.find("span")
.first()
.append(tooltipmax_blobSpeed)
.hover(function() {
    tooltipmax_blobSpeed.show();
}, function() {
    tooltipmax_blobSpeed.hide(); 
});

，这会产生一个带有工具提示的范围滑块，该工具提示仅在每个跨度手柄悬停时出现。一次只能显示一个工具提示，因为您一次只能悬停一个跨度手柄。

工具提示超过jquery范围滑块手柄

1 个答案: