First of all, you have a typo in your css for #portMain (line 5), the
color value should have exactly 6 (or 3) hexadecimal digits
1. (line 35)
you are using a jQuery each() function so the this object is the
selected object and not the this object you expected it to be
2. (line 39):
if($('#portMain>div')[i] != $(this)) tests if a DOM Element is equal
to a jQuery object, which will never be true (or false in your case)
3. (line 41):
$('#portMain>div')[i] is not a jQuery Object but a DOM Element, so you
have to make it a jQuery Object again, before you can apply
removeClass()
--> $($('#portMain>div')[i]).removeClass().addClass('portDiv');
4. for simplicity and performance issues I would suggest that you
store your currently "on" element somewhere (either as global variable
or with data()) and handle only the new and old "on" elements, instead
of traversing through all divs on every click.
$('#portMain>div').click(function(){
var prev = $('#portMain').data("prev");
if (prev)
prev.removeClass().addClass('portDiv');
$(this).removeClass().addClass('portDiv2');
$('#portMain').data("prev", $(this));
})
by(e)
Stephan
2009/1/28 pho99 <longng...@gmail.com>:
>
> Hello.
>
> I am just starting to learn JQuery. I want to click on a div to set an
> "on" class. When I click on another div, I want the first div to
> release the "on" class and restore to default class. I also have a
> hover effect that apply to divs that are not shown as "on."
>
> I am trying to set an "If" condition within the "eachfunction" loop.
> I've tried the "not" method, but I am not referring to the right
> object. Can someone take a look?
>
> Here is my code:
>
> <html>
> <head>
> <title>test</title>
> <style type="text/css">
> #portMain{background-color:#99000}
> .portDiv{border:solid 2px #444444; font:normal 22px
> verdana;padding:
> 4px}
> .portDivOver{border:solid 2px #CCC000; font:normal 22px
> verdana;padding:4px}
> .portDiv2{border:solid 2px #0000FF; font:normal 22px
> verdana;padding:
> 4px}
> </style>
> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
> libs/jquery/1.3.1/jquery.min.js"></script>
> <script type="text/javascript">
>
> $(function() {
> $.portBox = {
> box : $('#portMain div'),
> len : $('#portMain div').size()
> };
>
> $('#portMain').find('div').each(function(i) {
> $(this).addClass('portDiv');
> })
>
> //**SETCLASS**//
>
>
> $('#portMain>div').click(function(){
>
>
> $(this).removeClass().addClass('portDiv2');
>
> $('#portMain').find('div').each(function(i) {
>
>
>
> if($('#portMain>div')[i] != $(this)){
>
>
> $('#portMain>div')[i].removeClass().addClass('portDiv');
>
> }
> // $('#portMain>div')[i].not($(this)).removeClass().addClass
> ('portDiv');
>
> })
> })
>
> //**ENDCLICK**//
>
> $('#portMain div').mouseover(function() {
>
> $(this).not('.portDiv2').removeClass().addClass('portDivOver');
> })
> $('#portMain div').mouseout(function() {
>
> $(this).not('.portDiv2').removeClass().addClass('portDiv');
> })
>
>
>
> });
> //**ENDFUNCT**//
>
> </script>
> </head>
> <body>
> <div id="portMain">
> <div>port0</div>
> <div>port1</div>
> <div>port2</div>
> <div>port3</div>
> <div>port4</div>
> <div>port5</div>
> </div>
> <a href="http://www.yahoo.com";>clickme</a>
> </body>
> </html>
>
