Question

我有一個jQuery的rangeslider，我想有一個工具提示顯示在兩個手柄上。我的代碼如下，並從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

無論出於何種原因，有必要尋找跨度，而不是階級跨度，否則，提示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(); 
}); 

，並導致了一系列滑蓋只出現在每個溫泉工具提示n把手被徘徊。一次只會出現一個工具提示，因爲您一次只能懸停一個跨度句柄。