This has to do with the order in your styles. Since you're toggling
the class, you're only adding (or removing) the class to the DIV that
was clicked, not replacing what classes are already there. As a
result, this effect is occurring:
<div class="divRed divGray">test</div> <!-- HTML when divRed is
clicked the first time -->
<div class="divGreen divRed">test 2</div> <!-- HTML when divGreen is
clicked the first time -->
Now, we get into stylesheets and how they work. With the way your CSS
is set up, divGreen is defined after red, and therefore takes
precidence when both are used within an element. To correct this, you
only need to move the order in which you define your classes.
<style>
div {height: 100px; width: 100px;}
.divGreen {background-color: green;}
.divRed {background-color: red;}
.divGray {background-color: gray;}
</style>
Hope this helps!
- George
On Feb 8, 8:40 am, meeboo <[EMAIL PROTECTED]> wrote:
> Hey all!
>
> I'm wondering why the following code will toggle the div 'divRed' to a
> different color, but it won't toggle the color for 'divGreen'.
>
> <style>
> div {height: 100px; width: 100px;}
> .divRed {background-color: red;}
> .divGray {background-color: gray;}
> .divGreen {background-color: green;}
> </style>
> <script type="text/javascript">
> $(document).ready(function() {
> $(".divRed").click(function() { $(this).toggleClass("divGray"); });
> $(".divGreen").click(function() { $(this).toggleClass("divRed");
> });});
>
> </script>
> </head>
> <body>
> <div class="divRed">test</div> <!-- Toggles background color -->
> <div class="divGreen">test 2</div> <!-- Will not toggle background
> color -->
> </body>
>
> The odd thing is that when I inspect the divs they both are updated by
> jQuery and their classes are toggled, but the background color change will
> only be for divRed and not divGreen
> --
> View this message in
> context:http://www.nabble.com/toggleClass-weird-behaviour-tp15350732s27240p15...
> Sent from the jQuery General Discussion mailing list archive at Nabble.com.
