0

我的网页上有一些滑块，我想更改其中一个滑块的颜色，但只更改选定的部分（例如，滑块的范围为 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 使用 ?

谢谢！

亲切的问候，

加里

4

1 回答 1

0

您可以在 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");

在 JSFiddle 中运行。

于 2013-04-19T09:49:53.687 回答