jQuery - Click Add/Remove Class - Multiple Buttons

Question

For some reason when I add the second click function it stops working completely. I was wondering if anybody could help pin point what the issue might be?

What I'm trying to do:

The default state is "day" and when "night" is clicked, it removes the day class and adds the night class. Which changes the background image. Which works... Sort of. However, when I add the function for the day button to add the day class and remove the night class is breaks and doesn't work.

Here's a fiddle of what I have: http://jsfiddle.net/790hqykq/3/

$(document).ready(function () {

    $('.night').click(function () {
        $('#room').addClass('night');
        $('#room').removeClass('day');
    });

    $('.day').click(function () {
        $('#room').addClass('day');
        $('#room').removeClass('night');
    });

});

Thanks!!

Edit: Also - Is there any way to fade this class change? Similar to fadeIn/fadeOut? Thanks!

Answer 1

jsFiddle Demo

The problem with your fiddle is that the #room element has the class day. So does the anchor element. When the event handler is setup

$('.day').click(function () {

It is also assigned to the room element, and as a result of that, #room ends up also having the event handler attached to it. This causes day to always be selected as the element's class, even when night is clicked.

You should consider changing the class name to something like daycolor and nightcolor

<div id="room" class="daycolor">

and

#room.daycolor {
 background: #00CCFF;
}

Answer 2

The element with ID room has the class day , as one of the elements within it. When you attach the handler, it's being attached to both elements.

This should solve your problem:

$(document).ready(function () {
    $('.timeButton.day').click(function () {
        $('#room').addClass('day').removeClass('night');
    });

    $('.timeButton.night').click(function () {
         $('#room').addClass('night').removeClass('day');
    });
});

As per your complement about fading, you can use CSS 3 to achieve this:

#room {
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

Demo

Answer 3

Change the classnames on your children elements and use that selector for your events.

jsFiddle

HTML:

<div id="container">
    <div id="room" class="day"> 
        <a class="timeButton day1">Day</a>
        <a class="timeButton night1">Night</a>
    </div>
</div>

JS:

$(document).ready(function () {

    $('.night1').click(function () {
        $('#room').addClass('night');
        $('#room').removeClass('day');
    });

    $('.day1').click(function () {
        $('#room').addClass('day');
        $('#room').removeClass('night');
    });


});

Style:

#container {
    width: 300px;
    margin: 0 auto;
}
#container a, #container div {
    float: left;
    display: block;
}
#room {
    width: 300px;
    height: 200px;
    position: relative;
}
#room.day {
    background: #00CCFF;
}
#room.night {
    background: #0000CC;
}
#room .day1 {
    left: 30px;
    border: 1px solid black;
}
#room .night1 {
    right: 30px;
    border: 1px solid black;
}
#room .timeButton {
    position: absolute;
    width: 80px;
    height: 25px;
    top: 30px;
    cursor: pointer;
    text-align: center;
}
#room .timeButton:hover {
    background: #fff;
}

Answer 4

In your script, you reference to ".night" instead ".nightButton".

$('.nightButton').click(function () {
    $('#room').addClass('night');
    $('#room').removeClass('day');
});

$('.dayButton').click(function () {
    $('#room').addClass('day');
    $('#room').removeClass('night');
});

To achieve the transition, you can add this CSS propertie to #room.

-webkit-transition: background 2s; /* For Safari 3.1 to 6.0 */
transition: background 2s;

http://jsfiddle.net/790hqykq/13/

Answer 5

you can add css3 for the transitions from day to night. it wont working in older IE browsers 9 and under but is excellent in all modern browsers. browser support. You can use this generator to make the code faster.

        #room {
        width: 300px;
        height: 200px;
        position: relative;
       -webkit-transition: background 1000ms ease-in-out;
-moz-transition: background 1000ms ease-in-out;
-ms-transition: background 1000ms ease-in-out;
-o-transition: background 1000ms ease-in-out;
transition: background 1000ms ease-in-out;
    }

Demo jsfiddle

Answer 6

Here is another solution, where I just change the css-style via jquery.

Javascript:

$(document).ready(function () {
    $('.day').click(function () {
        $('#room').css("background-color", "#00CCFF");
    });

        $('.night').click(function () {
        $('#room').css("background-color", "#0000CC");
    });
});

Also you need to add a background-color to #room:

background: #00CCFF;

Fiddle: http://jsfiddle.net/790hqykq/7/