jquery滑块背景颜色答案

【问题标题】：jquery slider background colorjquery滑块背景颜色
【发布时间】：2014-05-26 23:06:35
【问题描述】：

我是网络编程新手，我正在尝试创建包含滑块的网站。我目前正在使用 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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

使用这样的 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"]") 这样的选择器，因为它会以找到的第一个封闭引号结束开放引号。

【讨论】：