更改JQuery范围滑块工具提示上的滑动文本

Change sliding text on JQuery range slider tooltip

本文关键字：文本 JQuery 范围 更改 工具提示      更新时间：2023-09-26

当滑块从中间移到右侧时，我想更改文本，当滑块从中部移到左侧时，我要更改为另一个文本，而当滑块位于确切的中间（起始位置）时，我希望更改为其他文本（弹出式工具提示应该是永久性的）

这是我的代码：

HTML:

<div class="col-md-4">
    <input autocomplete="on" type="range" min="0" max="20" value="10" 
           id="agriculture" data-toggle="tooltip" data-placement="bottom" 
           title="Hey! You should drag me!">
</div>

JS:

 $("#agriculture").tooltip();

这是我目前的小提琴设置。

请帮我实现这一点。如果我移动滑块，必须调用一些函数，并且文本应该根据位置进行更改。

提前谢谢。！

http://jsfiddle.net/MK55f/

您可以在mouseup上设置一个处理程序，并使用val()来获取当前范围值，并用attr() 设置title属性

在我的小提琴里，我注释掉了.tooltip()，因为我看不出重点是什么，而且它似乎覆盖了title属性提供的默认工具提示。

您应该能够通过"输入更改"事件获得更改：

        $('#agriculture').on('input change', function () {

然后获取值并根据值更改标题：

        $("#agriculture").tooltip('hide')
                          .attr('data-original-title', 'New Title')
                          .tooltip('fixTitle')
                          .tooltip('show');

演示：http://jsfiddle.net/Finrod/H2FZQ/25/

相关文章：