How do I use jquery to change a previous div background color?

What I'm trying to do is, if a div is clicked on, that div and its predecessors have the same background color. For example if '4' is clicked on; 4, 3, 2 and 1 have the same background color. I tried unsuccessfully to achieve this, how do I fix it?

http://jsfiddle.net/mdanz/KPS7a/

<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='selec开发者_如何学Pythont' id='5'>5</div>
<div class='select' id='6'>6</div>


</div>

Main error: id is an undefined variable. You have to add quotes around it.

Fiddle: http://jsfiddle.net/KPS7a/3/

Additional changes to get the code to work:

• Added quotes around .attr(id) -> .attr("id")
• Renamed var i to var id
• Changed the inner $(".select") to $(this)
• Changed .css("background-color", "green") to .addClass("green")
  Added a new declaration to the CSS: .green { background-color: green}
  Added $(".green").removeClass("green") at the beginning of the click event, so that the color will reset on each click (previously, every tile will still be green if you first click at 5, then 1)

Also in your jsfiddle you haven't referenced jQuery. I've also made a modified version for you which I think is simpler (but requires the html you provided to be unchanged): http://jsfiddle.net/6386x/

Hope it helps!

Like Rob mentioned you need to change id to 'id' since id is undefined variable.

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

You can also modify your code to something like this:

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

Here is how I solved it: http://jsfiddle.net/7w2ft/. The JavaScript looks like this:

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