Question

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

#include<stdio.h>  
#include<string.h>  
int main()  
{  char c[1024]; int i,d=1;  
 gets(c);  
 printf("%c%c\n",c[d],c[d+5]);  
 gets(c);    
 puts(c);  
 printf("%c%c\n",c[0],c[4+d]);  
 return 0;  
 }

Jsfiddle example

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

请有人帮我解决这个问题

谢谢

Answer 1

第一个问题：不推荐使用bind，使用

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

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

为了简化所有内容，您可以使用滑块创建功能。

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

tooltip.text(ui.value);

为：

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

摘录：

＆＃13;

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);
})

＆＃13;

body {
    margin-top: 80px;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: