Question

我的网页上有一些滑块，我想更改其中一个滑块的颜色，但只想更改所选的部分（例如Slider的范围是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使用？）中调用类“ui-slider-bg ui-btn-active ui-btn-corner-all” p>

谢谢！

亲切的问候，

加里

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

从JQuery编辑Slider的CSS

1 个答案: