在具有多个句柄的 jquery ui 滑块上显示工具提示

Question

我有一个带有多个手柄的 Jquery ui 滑块，我可以添加和删除它，我想在移动手柄时在手柄上方显示一个工具提示，这是我创建的代码：

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 20;

//add handle to the slider
$('button').bind('click', function(e) {

  e.preventDefault();

  $(".slider").slider("destroy");

  values.push(val);
  values = values.sort();

  $(".slider").slider({
    min: 0,
    max: 100,
    steps: 1,
    values: values
  })

})

//create the slider
$(".slider").slider({
  min: 0,
  max: 100,
  steps: 1,
  values: values,
  slide: function(event, ui) {
    tooltip.text(ui.value);
  },
  change: function(event, ui) {}

}).find(".ui-slider-handle").append(tooltip).hover(function() {
  tooltip.show()
}, function() {
  tooltip.hide()
});

//remove slider handle on double click
$(document).on('dblclick', '.ui-slider-handle', function() {
  if ($('.ui-slider-handle').length > 2)
    $(this).remove();
    //alert($(this)[0].style.left);
})

Jsfiddle example

正如您在示例中看到的，工具提示可以正常工作，但它没有出现在正确的位置，而且它也不适用于新创建的句柄。

请有人帮我解决这个问题

谢谢

Answer 1

第一个问题：不推荐使用绑定，继续使用

当您销毁滑块时，您也会删除工具提示！

因此，在单击按钮时，在销毁滑块之前，您需要保留工具提示 (jQuery.clone()) 的副本，以便再次使用它。

为了简化一切，您可以使用滑块创建功能。

为了解决最后一个问题（...但它没有出现在正确的位置）您需要更改这行代码：

tooltip.text(ui.value);

到：

$(this).find('div').text(ui.value);

sn-p：

function createSlider(tooltip, values) {
   $(".slider").slider({
          min: 0,
          max: 100,
          steps: 1,
          values: values,
          slide: function(event, ui) {         
            $(this).find('div').text(ui.value);
          },
          change: function(event, ui) {}
          
        }).find(".ui-slider-handle").append(tooltip).hover(function() {
          $(".ui-slider-handle").find('div').hide()
          $(this).find('div').show();      
        });
}

var tooltip = $('<div id="tooltip" />').css({
    position: 'absolute',
    top: -25,
    left: -10
}).hide();

var values = [10, 50, 70, 90];
var val = 23;

$('button').on('click', function(e) {

    e.preventDefault();

    //
    // preserve tooltip
    //
    tooltip = $('#tooltip').clone();
    $(".slider").slider("destroy");

    values.push(val);
    values = values.sort();

    createSlider(tooltip, values);
})


createSlider(tooltip, values);

$(document).on('dblclick', '.ui-slider-handle', function() {
    if ($('.ui-slider-handle').length > 2)
        $(this).remove();
    //alert($(this)[0].style.left);
})

body {
    margin-top: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<div class="slider"></div>
<br>
<button>Click it!</button>