Question

我是网络编程的新手，我正在尝试创建包含滑块的网站。我目前正在使用jquery来创建滑块。我试图在滑块值小于5时将滑块的背景颜色更改为红色，当大于5时将其更改为绿色。如何完成此操作？我是否必须使用CSS来实现这一目标？如果是这样，我应该如何将CSS与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>

Answer 1

jQuery UI使用的属性background比您的属性background-color更重要。将您的$( "#slider-range-max" ).css("background-color","#ff0000");更改为$( "#slider-range-max" ).css("background","#ff0000");即可。

另外，不要忘记将背景更改放入else语句中，否则即使金额超过5，也会保持红色。

Answer 2

看看这个：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;
}

Answer 3

使用这样的if语句。默认颜色应为红色（＃ff0000），当#amount的值为＆gt;时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滑块背景颜色

3 个答案: