jQuery的滑块背景颜色 [英] jquery slider background color
问题描述
我是网络编程的新手，我正尝试创建包含滑块的网站。我目前使用jQuery来创建滑块。我试图在滑块值小于5时将滑块的背景颜色更改为红色，并且当它大于5时将其改为绿色。我该如何实现？我需要使用CSS来完成这个任务吗？如果是这样，我应该如何将CSS与jQuery代码一起集成。
这是我迄今取得的进展：
编辑我尝试使用.css （），并将 background-color 属性设置为＃ff0000 ，但那不起作用。 / p>
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> jQuery UI滑块 - 固定最大值的范围< / title>
< link rel =stylesheethref =http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css>
< script src =http://code.jquery.com/jquery-1.9.1.js>< / script>
< script src =http://code.jquery.com/ui/1.10.4/jquery-ui.js>< / script>
< link rel =stylesheethref =/ resources / demos / style.css>
< script>
$（函数（）{
$（＃slider-range-max）.slider（{
range：min，
min：0，
max：10，
value：0，
step：.001，
slide：function（event，ui）{
$（#amount）.val（ui .value）;
if（ui.value< 5）{
$（＃amount）。attr（style，border：0; color：＃ff0000; font-weight： ）;
$（＃slider-range-max）.css（background-color，＃ff0000）;
}
else
$ （#amount）。attr（style，border：0; color：＃00ff00; font-weight：bold;）;
}
}）;
$（#amount）.val（$（＃slider-range-max）.slider（value））;
}）;
< / script>
< / head>
< body>
< p>
< label for =amount>信任值：< / label>
< input type =textid =amountstyle =border：0; color：＃ff0000; font-weight：bold;>
< / p>
< div id =slider-range-max>< / div>
< / body>
< / html>
jQuery UI使用属性背景这比你的财产 background-color 更重要。将 $（＃slider-range-max）.css（background-color，＃ff0000）; 更改为 $（ ＃slider-range-max）.css（background，＃ff0000）; 不要忘记将背景更改放入 else 语句中，否则即使金额超过5，它也会保持红色。
I am new to web programming and I am trying to create website that contains slider. I am currently using jquery to create the slider. I am trying to change the background color of the slider to red when the slider value is less than 5 and to green when it is greater than 5. How do I accomplish this? Would I have to use CSS to accomplish this? If so, how am I supposed to integrate CSS along with the jquery code.
Here is my progress so far:
EDIT I tried using .css() on the slider element and setting the background-color property to #ff0000, but that did not work.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Range with fixed maximum</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider-range-max" ).slider({
range: "min",
min: 0,
max: 10,
value: 0,
step: .001,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
if(ui.value < 5){
$("#amount").attr("style","border:0; color:#ff0000; font-weight:bold;");
$( "#slider-range-max" ).css("background-color","#ff0000");
}
else
$("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;");
}
});
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
});
</script>
</head>
<body>
<p>
<label for="amount">Trust Value:</label>
<input type="text" id="amount" style="border:0; color:#ff0000; font-weight:bold;">
</p>
<div id="slider-range-max"></div>
</body>
</html>
jQuery UI uses the property background which is more important than your property background-color. Change your $( "#slider-range-max" ).css("background-color","#ff0000"); to $( "#slider-range-max" ).css("background","#ff0000"); and it works.
Also, don't forget to put the background change into your else statement, or else it'll stay red, even when amount is more than 5.
这篇关于jQuery的滑块背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
