Question

So I’m setting up a background changer for accessibility purposes for a client. I have a set of div’s with the required bg color, and the jQuery to change the body background on click.

What I want is for the clicked element to change to white (ie, a reset option) on click.

But with the code I have, if you click on another, it also turns white, without resetting the other, so you end up with a whole bunch of white divs.

here is my code:

<div class="bg_changer">
                <ul><li class="bg_1 bg_setter"><a >bg_one</a></li>
                <li class="bg_2 bg_setter" ><a >bg_two</a></li>
                <li class="bg_3 bg_setter"><a >bg_three</a></li>
                <li class="bg_4 bg_setter"><a >bg_four</a></li>
                <li class="bg_5 bg_setter"><a >bg_five</a></li>
                <li class="bg_6 bg_setter"><a >bg_six</a></li>

                </ul>

</div><!-- end of bg_changer -->

css

.bg_1{
    background-color: rgba(204,204,204,1);
}
.bg_2{
    background-color: rgba(254,254,196,1);
}
.bg_3{
    background-color: rgba(253,190,130,1);
}
.bg_4{
    background-color: rgba(253,253,128,1);
}
.bg_5{
    background-color: rgba(158,208,253,1);
}
.bg_6{
    background-color: rgba(218,218,254,1);
}

and jQ

$(document).ready(function(){
    $(".bg_setter").click(function() {
      var bg_new =  $(this).css('background-color');
        $("body").css('background-color', bg_new);
        $(this).css('background-color', 'white');
    });

});

Does anyone have any ideas about how to implement this change, so that if I switch bg_one, but then switch bg_two, I can reset bg_one to it’s original background color?

I can’t think of a way to do this without storing a tonne of variables, surely there must be something easier…

Answer 1

One way would be to set a global variable which holds the Selected element, and the selected element’s color. When you click another, it sets the previously selected element and color back, using those variables.

$(document).ready(function() {
    //global vars - nothing yet, no color has been selected
    var prev_element, prev_color;

    $(".bg_setter").click(function() {
        //if there has been a previously selected element - set it's color back
        if (prev_element) {
            prev_element.css('background-color', prev_color);
        }

        //Store this element and the current color
        prev_element = $(this);
        prev_color = $(this).css('background-color');

        //Update the body background color with the color selected
        $("body").css('background-color', prev_color);

        //set the selected element background color to white
        prev_element.css('background-color', 'white');
    });

});​

DEMO: http://jsfiddle.net/AY2B3/2/