如何更改每个输入范围的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); 
} 
}); 

很简单 - 但伟大工程.....