Thank you kindly for your reply. I didn't even think of using PREV.
-Long
On Jan 29, 4:13 am, Stephan Veigl <stephan.ve...@gmail.com> wrote:
> 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>
