I think you want this:
if($("#content").hasClass("blue")) {
$("#content").removeClass("blue");
$("#content").addClass("red");
}
if($("#content").hasClass("red")) {
$("#content").removeClass("red");
$("#content").addClass("blue");
}
if($("#content").hasClass("green")) {
$("#content").removeClass("green");
$("#content").addClass("red");
}
On May 19, 4:44 am, Edwinistrator <enol...@gmail.com> wrote:
> I want to change the color on every click of the div, by changing the
> class and checking if hasClass. First removeClass, then addClass.
> But this won't work?
>
> Live demo:http://www.edwinistrator.com/stuff/jquery/
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> "http://www.w3.org/TR/html4/loose.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml"; lang="en">
> <head>
> <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
> <title>Test</title>
> <style type="text/css">
> div { cursor: pointer; float: left; border: solid 1px #ccc; padding:
> 5px; }
> .red {color: red;}
> .blue {color: blue;}
> .green {color: green;}
> </style>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
> libs/jquery/1.3/jquery.min.js"></script>
> <script type="text/javascript">
> $(document).ready(function(){
> $("#content").removeClass("test");
> $("#content").addClass("red");
> $("#content").click(function(){
> //alert("boe");
> if($("#content").hasClass("blue"))
> $("#content").removeClass("blue");
> $("#content").addClass("red");
> if($("#content").hasClass("red"))
> $("#content").removeClass("red");
> $("#content").addClass("blue");
> if($("#content").hasClass("green"))
> $("#content").removeClass("green");
> $("#content").addClass("red");
> });
> });
> </script>
> </head>
> <body>
> <div id="content" class="test">
> I'm crazy.
> </div>
> </body>
> </html>
