Question

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

Answer 1

.css()需要两个参数或地图{};

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

当然，这不会改变每张幻灯片的背景颜色。但是你可以自己解决这个问题。你的CSS功能是固定的。

Answer 2

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

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

如何在输入范围的每一步改变div背景颜色？

3 个答案: