Question

Two questions…

I have a set of DIVS with some code intended to change the colour of the clicked DIV and reset the others to their default. This works nicely… but the background colours are specified inside the javascript code. When I tried to use CSS classes, things didn’t work as they should. How can I get this second version to work so that it uses css classes to specify the colours rather than the javascript.

My second question relates to the

.parent()

part of the code and what that actually does in this context?

Any help is appreciated.

Answer 1

Try this:

http://jsfiddle.net/HNXjQ/4/

HTML:

<div id="container">
    <div class="button on">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
    <div class="button off">1</div>
</div>

CSS:

#container {
    position: absolute;
    top: 0;
    left: 0;
}
.button {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid #333;
    background: green;
}
.on {
    background: red;
}

JS:

$('.button').click(function(){
    $(this).siblings().removeClass('on');
    $(this).addClass('on');
});

1. You don’t need an “off”-class to get this effect.
2. Also, in this case it’s better to use “.siblings()” which looks for it’s siblings than “.parent().find()”. (It’s basically faster / more precise)