从 JQuery 编辑 Slider 的 CSS

Question

我的网页上有一些滑块，我想更改其中一个滑块的颜色，但只更改选定的部分（例如，滑块的范围为 0 到 100，按钮位于 25，我只想要0-25 为红色）。

我的滑块在 .html 文件中使用以下内容：

<label for="slider-main">Main Slider: </label>
<input type="range" name="slider-main" id="slider-main" value="25" min="0" max="100" data-highlight="true"/>

何时将颜色变为红色的规则如下：

<script>
if (slider-main-value-one>slider-main-max)
{
$("#slider-main").css("background","red");
}
else
{
$("#slider-main").css("background","");
}
})
</script>

这只会改变标签的背景，不会改变滑块

使用萤火虫和弄乱我发现了我需要更改的元素以更改实际的滑块颜色；

ui-slider-bg ui-btn-active ui-btn-corner-all

问题是，我不知道如何在 JQuery 中调用它。

在萤火虫中，当标签改变颜色时，会发生这种情况；

<div class="ui-slider">    
<input id="slider-main" class="ui-input-text ui-body-a ui-corner-all ui-shadow-inset ui-slider-input" type="number" data-type="range" data-highlight="true" max="100" min="0" value="25" name="slider-main" style="background: none repeat scroll 0% 0% red;">

手动编辑firebug改变滑块本身的颜色如下；

<div class="ui-slider-track ui-btn-down-a ui-btn-corner-all" role="application">
<div class="ui-slider-bg ui-btn-active ui-btn-corner-all" style="width: 28%; background: red"></div>

这是直接在标签更改颜色的代码下方。

总而言之，问题是，我如何从我的 .js（或使用 .html 的 .html 中）调用“ui-slider-bg ui-btn-active ui-btn-corner-all”类？

谢谢！

亲切的问候，

加里

Answer 1

您可以在 jQuery 中使用此选择器访问元素：

$('.ui-slider-bg.ui-btn-active.ui-btn-corner-all')

或者您可以使用 CSS（显然是相同的选择器）：

.ui-slider-bg.ui-btn-active.ui-btn-corner-all {
    /* styles */
}

编辑：这是工作代码：

$("#slider-main, #first-slider .ui-slider-bg.ui-btn-active.ui-btn-corner-all").css("background", "red");

Running in JSFiddle.