jQuery Slider - 具有不同手柄的多个滑块

Question

我使用几个 jQuery 滑块作为用户输入。

每个滑块 (1) 都是由 (2) 创建的，并且它们工作完美。

1. div class="slider" id="a_unique_identifier_for_this_slider"> /div>

2. $(document).ready(function() { $(".slider").slider();});

我遇到的问题是我希望每个唯一的滑块都有一个唯一的句柄（图像、形状等）。这可以在 jquery-ui.css 中进行样式化，但它会改变我所有的滑块手柄。

有什么方法可以定义几种“手柄样式”，然后将它们归因于我想要的滑块吗？

谢谢， 克林顿

Answer 1

将其放入您的 $(document).ready(function() {}) 代码块中：

$(".slider").slider();
$('#a_unique_identifier_for_this_slider .ui-slider-handle').eq(0).addClass("ui-slider-handle-some-unique-class");

这会为其中一个滑块添加一个 css 类。您可以对每个滑块执行此操作。 CSS由你决定。

Answer 2

您必须删除应用手柄样式的类并添加您自己的自定义类。

var sliders = $(".slider");
sliders.slider();
sliders[0].removeClass("classNameSpecifyingTheHangle").addClass("YourNewClassName");

未经测试..但这应该是总体想法。

Answer 3

只需添加一些特定于您的滑块 div 的 CSS

#a_unique_identifier_for_this_slider span.ui-slider-handle { background: red; }