CODEWITHSUNDEEP
jquerycss
Andy
Andy

Reputation: 1432

DIV style change on click

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.

Upvotes: 0

Views: 2064

Answers (8)

James Cazzetta
James Cazzetta

Reputation: 3220

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)

Upvotes: 3

phunder
phunder

Reputation: 1703

.parent selects the parent element of the jQuery object that you are referencing. In this case, it will be "#container".

"$(this).parent().find('.button')" will thus return all of the ".button" elements inside of the "#container" element, i.e. all of your buttons.

Your JavaScript will thus not work as you seem to expect it will. Try the following: 

$('.button').click(function(e){
    $('.on').addClass('off'); // add '.off' to the one element that is '.on' 
    $('.on').removeClass('on'); // remove '.on' from this same element
    $(e.target).addClass('on'); // add '.on' to the element clicked
    $(e.target).removeClass('off'); //remove '.off' from that element clicked
    currentSelected = this;
});

Here I add 'e' as a parameter to the 'click' function. I then use 'e.target' to get the element that was clicked on. I also ensure that n element does not have both '.on' and '.off' connected to it at the same time, ensuring that no styles override each other.

Upvotes: 2

MrFischer
MrFischer

Reputation: 117

Or quite simple:

http://jsfiddle.net/HNXjQ/14/

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

​

Upvotes: 1

AlexMA
AlexMA

Reputation: 10192

Due to CSS specificity, the off class was being overwritten, so like others have said, you need to remove the on class first. Also, did you mean to use background instead of background-color in your css for the off and on classes?

Upvotes: 0

Kyle
Kyle

Reputation: 67194

You can set up a new class and use jQuery's .toggleClass to switch between them.

http://jsfiddle.net/Kyle_Sevenoaks/HNXjQ/5/

Upvotes: 1

Mitya
Mitya

Reputation: 34556

Try this:

$('#container').on('click', 'div.button', function(){
    $(this).addClass('on').siblings('.button').removeClass('on');
});
​

Updated Fiddle.

Some points:

1) Any time you're binding the same event callback to multiple events, it's better to delegate the event. So I delegate it to the parent container rather than attach the event repeatedly to each element. If this is new for you, look into event delegation.

2) In your original code, the parent() call was a means of going up the tree and then back in, to basically affect siblings. I have changed this to simply use siblings() instead.

3) Instead of having an explicit 'off' state, I make the off state the default. Then, we simply turn on / turn off the on state (.on)

Upvotes: 4

Xun Yang
Xun Yang

Reputation: 4419

$('.button').click(function(){
    $(this).parent().find('.button.on').removeClass('on').addClass('off');
    $(this).removeClass('off').addClass('on');
});
​

Upvotes: 1

Yngve B-Nilsen
Yngve B-Nilsen

Reputation: 9676

You could change your javascript code to this:

$('.button').click(function(){
    $(this).parent().find('.button').addClass('off');
    $(this).removeClass('off').addClass('on');
});
​

That's quick and dirty, but it works

Upvotes: 1

Related Questions