如何在运行中向 jQuery 滑块添加多个句柄

Posted 2023-03-13

【中文标题】如何在运行中向 jQuery 滑块添加多个句柄

【英文标题】：How to add multiple handles to a jQuery slider on the fly

【发布时间】：2012-03-06 19:59:25

【问题描述】：

我想这样做：

在某个事件上为 jQuery 滑块添加句柄 那个句柄应该有一个id，这样当它滑动时，我可以访问它的值。 任何想法如何做到这一点？ Here 是 JSfiddle 中的代码，其中实现了具有两个手柄的滑块。我需要做的就是通过某些触发的事件动态添加句柄，并获取每个句柄的值以供进一步使用。

【问题讨论】：

发布您的代码。目前还不清楚你现在拥有什么，以及你在问什么。

【参考方案1】：

根据http://jqueryui.com/demos/slider/ 上的文档，我认为没有任何可能性。添加或删除值时，您可以销毁并重新创建滑块。这要求您存储现有句柄的所有当前值。不是一个超级优雅的解决方案，但它是我目前看到的除了更新 jquery ui 库之外唯一的解决方案。

我用一个简单的例子更新了你的小提琴：http://jsfiddle.net/FPCRb/4/

【讨论】：

我看到了上面提到的小提琴。但是，您能否建议任何具有某些内置功能的库来完成我们正在尝试做的事情？嗯，准确地说；我正在尝试将这些多个句柄与不同的变量相关联以供进一步使用。

我不确定我是否完全理解，但您希望能够随时检索给定句柄的值吗？您可以使用索引来执行此操作。我已经更新了小提琴jsfiddle.net/FPCRb/10 并添加了一个变量（一个数组）** currentValues** 它保存了当前值。您可以将变量与 currentValues 中的项目相关联。我越来越近了吗？

我成功获取了不同句柄的值，但我需要在单击特定句柄时执行一些操作，并在单击另一个句柄时执行一些其他操作。该怎么做？

@GILL jQuery UI 没有提供点击处理程序，所以我创建了自己的处理程序，您可以在 jsfiddle.net/FPCRb/25:$slider.delegate('a.ui-slider-handle', 'click', function () alert('Handle with index ' + $(this).index() + ' and value ' + currentValues[$(this).index()]); );

上看到它

@GILL：看看：jsfiddle.net/FPCRb/39。我为手柄设置了不同的背景颜色。