如何更改每個輸入範圍的div背景顏色？

Question

我想爲輸入類型範圍內的每個步驟（最多10-15個）定義顏色。 並且在每一步改變時，div都會改變它的背景顏色。

Answer 1

您可以將處理程序綁定到輸入元素的更改事件，並使用switch結構來決定顯示哪種顏色。

$("input[type='range']").change(function(e) { 
    var value = $(e.target).val(); 
    switch(value) { 
     case "1": 
      $("div").css({backgroundColor: "#AABBCC"}); 
      break; 
     case "2": 
      //and so on 
    } 
}); 

如果您需要對每個值做其他操作，這可能會很有用。如果你正在做的是改變背景顏色，但是，你可以只使用一個數組查找：

var colors = ["#AABBCC", "#BBCCDD", "#CCDDEE", ...]; 
$("div").css({backgroundColor: colors[value]}); 

Answer 2

.css()需要兩個參數或地圖{};

$('.slider').change(function() { 
    var green = this.value(2); 
    $('.bar').css("background-color", "#ff0000"); 
}); 

這當然不會改變每次幻燈片更改您的背景顏色。但是你也可以自己想想。你的CSS功能是固定的。

Answer 3

不能真正理解你的問題，但這裏是一個嘗試：jsfiddle 類型的東西，並移動到接下來...嘗試刪除過於....

CSS：

.done_class 
{ 
background-color:green;  
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease;  
} 
.def_class 
{ 
    margin:5px; 
    width:100px; 
    height:50px; 
    border:1px solid grey; 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
-o-transition: all 0.3s ease; 
transition: all 0.3s ease; 
} 

HTML：

<input type='text' class='change1' id='target1' /> 
<input type='text' class='change1' id='target2' /> 
<input type='text' class='change1' id='target3' /> 
<input type='text' class='change1' id='target4' /> 
      <br /><br /> 
<div id='target1' class='def_class' >target 1</div> 
<div id='target2' class='def_class'>target 2</div> 
<div id='target3' class='def_class'>target 3</div> 
<div id='target4' class='def_class'>target 4</div> 

腳本：

('.change1').change(function(){ 
var id_change = $(this).attr('id'); 
var change_val = $(this).val(); 
if(change_val!='') { 
$('div[id=' + id_change + ']').addClass('done_class').text(change_val); 
} else { 
$('div[id=' + id_change + ']').removeClass('done_class').text('target' + id_change); 
} 
}); 

很簡單 - 但偉大工程.....