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>

來源

2014-01-29 AndroidDev93

jQuery UI的使用屬性background比你的財產background-color更重要。將您的$("#slider-range-max").css("background-color","#ff0000");更改爲$("#slider-range-max").css("background","#ff0000");，它可以工作。

另外，不要忘了把背景變成你else聲明，否則會留下紅色的，即使量超過5

來源

2014-01-29 01:16:56 linkboss

看看這個：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; 
}

來源

2014-01-29 01:19:38 Siva

使用這樣的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"]")，因爲它會以發現的第一個封閉報價結束公開報價。

來源

2014-01-29 01:21:37 user2687646

jquery滑塊背景顏色

回答

相關問題