jquery滑块背景颜色

问题描述：

我是网络编程的新手，我试图创建包含滑块的网站。我目前使用jQuery来创建滑块。我试图在滑块值小于5时将滑块的背景颜色更改为红色，并且当它大于5时将其改为绿色。我该如何实现？我需要使用CSS来完成这个任务吗？如果是这样，我应该如何将CSS与jQuery代码一起集成。jquery滑块背景颜色

这是迄今为止我的进步：

编辑我尝试使用的CSS（）滑动部件上，并设置background-color属性#ff0000，但没有奏效。

<!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的使用属性background比你的财产background-color更重要。将您的$("#slider-range-max").css("background-color","#ff0000");更改为$("#slider-range-max").css("background","#ff0000");，它可以工作。

另外，不要忘了把背景变成你else声明，否则会留下红色的，即使量超过5

答

看看这个：jsFiddle。看看这是否适合你的需求。

$(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').removeClass('green'); 
      $('#slider-range-max').addClass('red'); 

     } 
     else{ 
      $("#amount").attr("style","border:0; color:#00ff00; font-weight:bold;"); 
      $('#slider-range-max').removeClass('red'); 
      $('#slider-range-max').addClass('green'); 
     } 

     } 
    }); 
    $("#amount").val($("#slider-range-max").slider("value")); 
    }); 


.ui-widget-header{ 
    background: none; 
} 
.red .ui-slider-range { 
    background-color: #ff0000; 
} 
.green .ui-slider-range { 
    background-color: #00ff00; 
}

答

使用这样的if语句。默认颜色应该是红色（＃ff0000），当#amount的值大于5时，它将颜色动画化为绿色。

if($('#amount').val(); > 5){ 
    $('#amount').animate({"color":"#00ff00"}, 1000); 
}else{ 
    $('#amount').animate({"color":"#ff0000"}, 1000);

或者你可以使用$('#amount').css("color":"#00ff00");立即将其更改为绿色，而不是动画。

快速提示：为您的jQuery选择器使用单引号。双引号将打破一些选择器，如$("#elem[type="text"]")，因为它会以发现的第一个封闭报价结束公开报价。

jquery滑块背景颜色

相关推荐