Question

我有两个句柄的jQuery滑块，我需要在初始化时打开两个工具提示。

var sliderTooltip = function(event, ui) {
    var curValue = ui.value ;
    var tooltip = htmltext;
    $(ui.handle).html(tooltip);

};
$("#slider").slider({
    range: true,
    min: 0,
    max: 1500000,
    values: [30000, 150000],
    create: showTooltips, 
    slide: sliderTooltip

创建滑块时，我需要获取句柄的值并将它们放入工具提示中。但是我怎样才能获得每一个的价值？据我所知，'ui'对象在初始化时是空的，直到被改变。我也试图像这样触发滑块更改事件：

$('#slider').trigger('slidechange');

或

$('#slider').trigger('change')

但它似乎没有效果。我怎么能这样做？

Answer 1

检查example at jsBin。

我使用create事件来附加工具提示。见代码。

创建滑块时，我们会得到以下元素：

<div id="slider" style="margin:50px" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
    <div class="ui-slider-range ui-widget-header ui-corner-all" style="left: 2%; width: 8%;"></div>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 2%;">
        <div class="ui-slider-tooltip" style="position: absolute; top: -25px; left: -25px;"></div>
    </a>
    <a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 10%;">
        <div class="ui-slider-tooltip" style="position: absolute; top: -25px; left: -25px;"></div>
    </a>
</div>

工具提示的

div元素是相同的，没有任何可以区分它们的信息，因此您必须通过父元素获取它们。我用了

$(event.target).find('.ui-slider-handle')[i]

和firstChild以达到特定的工具提示并设置正确的值。

最有可能有更优雅的方式来做到这一点。

带有两个句柄的jQuery UI滑块 - 获取初始数据

1 个答案: