jQuery changing colours of multiple elements on click

Question

and thanks, beginner here.

The formatting doesn't really work in jsfiddle, but that doesn't matter to my question.

Here's what I have: http://jsfiddle.net/8X7ZE/1/

What I'm trying to do is change all the elements with the blue colour to red (the h1 text and navigation bar) when the red div is clicked.

$(document).ready(function(){
    $('.colorred').click(function(){
        $('.over', '#thispage').css({"background-color", "#821122"});
        $('h1', '.nav').css({"color", '#821122'});
    });
});

Currently all that happens is it makes the elements I point to never appear (they fade in).

Answer 1

You had issues with commas in selectors and css method parameters.

This is your code:

$('.over', '#thispage').css({"background-color", "#821122"});
$('h1', '.nav').css({"color", '#821122'});

This is how I did it:

$('.over, #thispage').css("background-color", "#821122");
$('h1, .nav').css("color", '#821122');

So, if you want multiple selectors, just add commas, don't make two different parameters.

Then, the css(). As a parameter, you can either specify key, value , which I did, or an object, which you tried to do, but the correct syntax would be:

$('h1, .nav').css({"color": '#821122'});

And for multiple rules:

$('h1, .nav').css({"color": '#821122', "background-color": "#821122"});

See it working here: http://jsfiddle.net/8X7ZE/2/

Answer 2

you can just use JavaScript for this, there's no need to use JQuery.

I did a simple HTML colour changing project at college where you had to do the exact same thing.

<div class="javascriptcolours">
    <a href=javascript:void(0) onClick="changeBgcolor('#333333'); changeColor('#000000'); changeText('#ffffff'); changeBanner('images/banner.png'); changeHeader('images/cost_header.png'); changeMedia('images/cost_media.png'); changeLinkbox1('images/nav_plot.png'); changeLinkbox2('images/nav_director.png'); changeLinkbox3('images/nav_actors.png'); changeLinkbox4('images/nav_location.png'); changeLinkbox5('images/nav_cost.png'); changeFoot('#000000'); changeLinks('#808080');"><img src="Images/black.png" alt="Black" /></a>
    <a href=javascript:void(0) onClick="changeBgcolor('#999999'); changeColor('#ffffff'); changeText('#000000'); changeBanner('images/banner_white.png'); changeHeader('images/cost_header_black.png'); changeMedia('images/cost_media_white.png'); changeLinkbox1('images/nav_plot_white.png'); changeLinkbox2('images/nav_director_white.png'); changeLinkbox3('images/nav_actors_white.png'); changeLinkbox4('images/nav_location_white.png'); changeLinkbox5('images/nav_cost_white.png'); changeFoot('#ffffff'); changeLinks('#808080');"><img src="Images/white.png" alt="White" /></a>
    <a href=javascript:void(0) onClick="changeBgcolor('#a00000'); changeColor('#ff3332'); changeText('#ffffff'); changeBanner('images/banner_red.png'); changeHeader('images/cost_header.png'); changeMedia('images/cost_media_red.png'); changeLinkbox1('images/nav_plot_red.png'); changeLinkbox2('images/nav_director_red.png'); changeLinkbox3('images/nav_actors_red.png'); changeLinkbox4('images/nav_location_red.png'); changeLinkbox5('images/nav_cost_red.png'); changeFoot('#ff3332'); changeLinks('#ff9999');"><img src="Images/red.png" alt="red" /></a>
</div>

So basically that code above has the main images or divs which you're using...

<img src="Images/red.png" alt="red" />

here is an example of the changeColor method in my JS file attached to the site, this grabs the three elements navigation, maininfo and mediaframe and puts then allows the colour to be passed in with the above code.

function changeColor(colorIn)
    {
        document.getElementById("navigation").style.backgroundColor = colorIn;
        document.getElementById("maininfo").style.backgroundColor = colorIn;
        document.getElementById("mediaframe").style.backgroundColor = colorIn;
    }

as long as the onClick in the html code (top) and function in your JS file are the same, so in your case you'll probably want to call it changeBgcolor instead of changeColor.