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

我有一个工具提示的jQuery滑块控件。用户可以滑动以更改调整工具提示的值，或者用户可以在文本框中输入值，滑块和工具提示应该调整文本框中的值。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 肯

来源

2013-06-24 user2428475

在你的小提琴太多的错误，应该是：

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

来源

2013-06-24 01:34:09 pl71

THKS ....重新工作小提琴，当我改变文本框，滑块位置的变化，但提示不能反映变化值 – user2428475

@在answe 2428475请参阅编辑[R – pl71

你必须调用你的函数，尝试改变：

sliderTooltip;

到：

sliderTooltip();

来源

2013-06-24 01:24:08 tymeJV

这是一个解决方案：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); 
     } 
    });

来源

2013-06-25 13:33:35 rusln

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

回答

相关问题