jquery - 如何随着输入范围的每一步更改 div 背景颜色？

Question

我想为输入类型范围内的每个步骤（最多 10-15 个）定义一种颜色。并且在每一步更改时，div 都会更改其背景颜色。

Answer 1

.css()接受两个参数或一个映射{}；

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

当然，这不会改变每次幻灯片更改的背景颜色。但是您可能会自己弄清楚。你的 CSS 函数是固定的。

Answer 2

您可以将处理程序绑定到输入元素的更改事件，并使用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 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);
}
});

非常简单 - 但效果很好......