Question

我有一个带有工具提示的jquery滑块控件。用户可以滑动以更改调整工具提示的值，或者用户可以在文本框中输入值，滑块和工具提示应调整文本框中的值。

请参阅随附的jfiddle http://jsfiddle.net/k2sarah/caUku/2/。

<div id='slider'></div>
<div id='slider2'></div>
<input id='t1' type='text' />       


var initialValue = 2012;

var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue;
    var target = ui.handle || $('.ui-slider-handle');                                     
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue +
         '</div><div class="tooltip-arrow"></div></div>';   
   $(target).html(tooltip);


 }

    $('#t1').change(function () {
    var value = $('input[id$=t1]').val();
    $("#slider").slider("value", parseInt(value));
                    sliderTooltip;
    });

    $("#slider").slider({
    value: initialValue,
    min: 1955,
    max: 2015,
    step: 1,
    create: sliderTooltip,
    slide: sliderTooltip


 });

    var sliderTooltip1 = function(event, ui) {
        var curValue1 = ui.value || initialValue;
         var target = ui.handle || $('.ui-slider-handle');
        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 +  
        '</div><div class="tooltip-arrow"></div></div>'; $(target).html(tooltip);
    }

    $("#slider2").slider({
        value: initialValue,
        min: 1955,
        max: 2015,
        step: 1,
        create: sliderTooltip1,
        slide: sliderTooltip1
    });

以下代码调整滑块的值，但不会导致工具提示值反映到当前滑块值。

$('#t1').change(function () {
var value = $('input[id$=t1]').val();
$("#slider").slider("value", parseInt(value));
                sliderTooltip;
});

任何帮助将不胜感激。

THKS 肯

Answer 1

这是一个解决方案：jsFiddle

这将触发滑块的更改事件：

$('#t1').change(function () {
        var value = $(this).val();
        $(".slider").slider("value", parseInt(value));
    });

现在我们必须听滑块内的更改事件：

 change: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        }

整个滑块现在看起来像这样（因为你可以看到工具提示在创建时只设置了一次）：

$(".slider").slider({
        value: initialValue,
        min: 1955,
        max: 2015,
        step: 1,
        create: sliderTooltip,
        slide: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        },
        change: function (event, ui) {
            $(".tooltip-inner").html(ui.value);
        }
    });

Answer 2

您必须调用您的函数，尝试更改：

sliderTooltip;

为：

sliderTooltip();

Answer 3

小提琴中的错误应该是：

$('#t1').change(function () {
    var value = $('input#t1').val();
    $("#slider1").slider("option", "value", parseInt(value, 10));
    sliderTooltip();
});

编辑：添加了change事件以更新句柄值：

change: function (event, ui) {
    $(".tooltip-inner", this).html(ui.value);  /*thanks rusIn */

您可以将以下内容添加到slide:以反映输入字段中的更改：

$('#t1').val(ui.value);

见工作fiddle

jquery滑块工具提示不会更新文本框更改

3 个答案: