Question

我要做的是，如果单击div，则div及其前辈具有相同的背景颜色。例如，如果点击“4”; 4,3,2和1具有相同的背景颜色。我试图实现这一目标失败了，我该如何解决？

<style type="text/css">
.selectcontainer {
overflow:hidden;
display:block;
}

.select {
display:block
width:50px;
height:40px;
background-color:#59758d;
text-align:center;
font-family:arial;
font-weight:bold;
color:#FFFFFF;
font-size:24px;
cursor:pointer;
padding-top:10px;
}
.select:hover {
border:1px solid #d99c29;

font-size:32px;
}


</style>
<script type"text/javascript">
$(function() {
$('.select').live('click',function() {
var i = $(this).attr('id');

$('.select').each(function(i){
    $('.select').css({'background-color':'green'});
});

});

});
</script>
<div class='selectcontainer'>

<div class='select' id='1'>1</div>
<div class='select' id='2'>2</div>
<div class='select' id='3'>3</div>
<div class='select' id='4'>4</div>
<div class='select' id='5'>5</div>
<div class='select' id='6'>6</div>


</div>

Answer 1

主要错误：id是未定义的变量。你必须在它周围添加引号。

小提琴：http://jsfiddle.net/KPS7a/3/

使代码生效的其他更改：

在.attr(id)附近添加了引号 - ＆gt; .attr("id")
将var i重命名为var id
将内部$(".select")更改为$(this)
将.css("background-color", "green")更改为.addClass("green")
为CSS添加了新声明：.green { background-color: green}
在$(".green").removeClass("green")事件的开头添加了click ，以便每次点击时颜色都会重置（之前，如果您第一次点击5，则每个图块仍为绿色，然后1）

Answer 2

同样在你的jsfiddle中你还没有引用jQuery。我也为你做了一个修改后的版本，我认为这个版本更简单（但要求你提供的html保持不变）：http://jsfiddle.net/6386x/

希望它有所帮助！

Answer 3

就像Rob提到的那样，你需要将id更改为'id'，因为id是未定义的变量。

var i = $(this).attr('id');

您还可以将代码修改为以下内容：

$('.select').live('click',function() {
    $(this).prevAll('div.select').css('background-color', 'green');
});

Answer 4

以下是我如何解决它：http://jsfiddle.net/7w2ft/。 JavaScript看起来像这样：

$('.select').live('click', function(event) {
    $(event.target)
        .css('background-color', 'green')        
        .prevAll('.select')
        .css('background-color', 'green');
});

如何使用jquery更改以前的div背景颜色？

4 个答案: