jQuery Slider 的多个自定义句柄(通过唯一的类名)

Question

这是以前有人问过的，但我还没有找到直接的答案。

$(".milestone-timeline .slider-area").slider({
  range: 'min',
  value: 298,
  min: 0,
  max: 884,
  values: [ 10, 280, 620, 850 ]    
});
$(".milestone-timeline .slider-area").slider("option", "disabled", true);

好的，在这里我创建了 4 个不同的标记或 .ui-slider-handle。 现在，当创建滑块时，它将使，

<div class="slider-area">
  <div class="ui-slider-range"></div>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
  <a href="#" class="ui-slider-handle"></a>
</div>

我想在创建滑块时对这些句柄中的每一个应用不同的类名。

在jQuery UI滑块文档中，它说：

"滑块小部件将创建带有类'ui-slider-handle'的手柄元素初始化。您可以通过创建和追加元素并在 init 之前添加"UI-slider-handle"类。它只会创建匹配值/值长度所需的句柄数。例如，如果您指定'值：[1， 5， 18]' 并创建一个自定义句柄，插件将创建另外两个。

不幸的是，我不确定如何创建和附加自定义的"ui-slider-handle"。

任何帮助将不胜感激。 谢谢！

Answer 1

尝试将滑块手柄添加到要转换为滑块的元素中，如下所示：

<div class="milestone-timeline">         
    <div class="ui-slider-handle"></div>
</div>

这是有效的，因为在调用滑块 init 函数之前，您仍在添加该自定义元素。

Answer 2

阅读文档，看起来values只是设置多个滑块手柄的一种方式。照原样，您看起来无法添加类。

您可以使用第 n 个子选择器向每个滑块添加一个类。

http://api.jquery.com/nth-child-selector/

http://api.jquery.com/addClass/