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

jQuery UI slider with two handles - get initial data

本文关键字：滑块 UI 获取 数据 jQuery 句柄 两个      更新时间：2024-03-24

我有两个句柄的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'对象在初始化时为空，直到 siled 发生变化。我还尝试像这样触发滑块更改事件：

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

或

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

但似乎没有效果。我该怎么做？

在 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以访问特定的工具提示并设置适当的值。

很可能有更优雅的方法可以做到这一点。

相关文章：