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

时间:2013-06-24 01:18:34

标签: jquery jquery-ui

我有一个带有工具提示的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 肯

3 个答案:

答案 0 :(得分: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);
        }
    });

答案 1 :(得分:0)

您必须调用您的函数,尝试更改:

sliderTooltip;

为:

sliderTooltip();

答案 2 :(得分:0)

小提琴中的错误应该是:

$('#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