Announcement Announcement Module
Collapse
No announcement yet.
Need some with with JQuery and an if/else if statement... Page Title Module
Move Remove Collapse
Search Search Module
Collapse

Advertisement Advertisement Module
Collapse

Featured Images Featured Images Module
Collapse

Mediabistro Creative Sites Mediabistro Creative Sites Module
Collapse
Latest Topics Latest Topics Module
Collapse

  • <b>
    Comment on Anybody use a Mac Mini?
    <b>
    Right now, at work, I'm using an early 2011 MacBook Pro. It's had no problems at all. I'll likely get a new one early next year, but I'm in no hurry because I don't want to give up the 17-inch display....
    Today, 09:47 PM
  • iyiyi
    Reply to Anybody use a Mac Mini?
    iyiyi
    Overall I haven't really ever had any problems with macs either. Basically just the grpahics card problems I've been talking about. And the 2011 MBP is notorious for them (which is what I have now)....
    Today, 09:40 PM
  • <b>
    Reply to Anybody use a Mac Mini?
    <b>
    This is a puzzling discussion because the things described run counter to my experiences.

    I've been buying Macs since 1984, and have probably owned, maybe, a couple dozen of them. Also during...
    Today, 09:23 PM
  • MeadowlarkGraph
    Reply to Infographics...struggle
    MeadowlarkGraph
    Okay, first attempt at less boring. More variation in text size and background, some different images, shadows. Tried a few different layouts but nothing was hitting me. I actually like "hospice...
    Today, 09:13 PM
  • iyiyi
    Reply to Anybody use a Mac Mini?
    iyiyi
    They are what I used before my mpb. They always had issues. The graphics cards would get screwed up and the screens would freeze (like my mpb is now doing), they were for some reason slower than other...
    Today, 08:53 PM
Advertisement Advertisement Module
Collapse

Sponsors Sponsors Module
Collapse

X
Conversation Detail Module
Collapse
  • Filter
  • Time
  • Show
Clear All
new posts

  • Need some with with JQuery and an if/else if statement...

    I'm new to jQuery and I'm trying to set a variable when a link is clicked. Then when another link is clicked, it reads the variable and, using an if/else if statement, runs the appropriate code.

    I'm not sure I have the correct syntax for some of these things. Any help would be awesome.
    Code:
        $(function() {
            $('a.click_rotors').click(function() {
                 if ($current_link = "bases1") {
                 $('#bases1').fadeOut(function () {
                     $('#rotors1').fadeIn();
                 });
                 } else {
                 $('#onesies').fadeOut(function () {
                     $('#rotors1').fadeIn();
                 });
                 };               
                 $current_link = "rotors1";
            });<!--close click function-->
    
            $('a.click_bases1').click(function() {
                 if ($current_link = "rotors1") {
                 $('#rotors1').fadeOut(function () {
                     $('#bases1').fadeIn();
                 });
                 } else {
                 $('#onesies').fadeOut(function () {
                     $('#bases1').fadeIn();
                 });
                 };             
                 $current_link = "bases1";
            });<!--close click function-->
    
            $('a.click_onesies').click(function() {
                 if ($current_link = "rotors1") {
                 $('#rotors1').fadeOut(function () {
                     $('#onesies').fadeIn();
                 });
                 } else {
                 $('#bases1').fadeOut(function () {
                     $('#onesies').fadeIn();
                 });  
                 };             
                 $current_link = "onesies";
            });<!--close click function-->
        });

  • #2
    A little clarification...this is working except when I click the "onesies" link, then click one of the other links. The if statement should read that the variable "current_link" has a value of "onesies", then run the "else" portion of the if/else statement. But it runs the "if" portion. So something must be wrong with the setting of my variable, and reading it in the if/else statement.

    Comment


    • #3
      Using some alert statements, it looks like my variables are being written and changed correctly when the links are pressed, so the problem must have something to do with the if/else statement

      Edit: I've been doing some more debugging and it is running the first if statement even if it is not true, rather than the else statement. Anyone know why?
      Last edited by MikeTheVike; 09-14-2009, 09:00 PM.

      Comment


      • #4
        Are you using any other js add ones for this? I was on my site and 1 add on (prototype.js) was canceling out all of my jQuery scripts.

        Sorry I can't be of much more help...
        Professional Pixel Pusher — Designing the world around you. | Working daily to reach 10,000 hours of practice.

        Comment


        • #5
          it's because you're just assigning "bases1" to $current_link. to test for equality you have to use ==.
          portfolio | daily image | reffee

          Comment


          • #6
            HTML Code:
                $(function() {
                
                	/*
                	* To be accessible to all functions
                	* current link must be defined here.
                	*/
                	var current_link = '';
                
                    $('a.click_rotors').click(function() {
                         if (current_link == "bases1") {
                         $('#bases1').fadeOut(function () {
                             $('#rotors1').fadeIn();
                         });
                         } else {
                         $('#onesies').fadeOut(function () {
                             $('#rotors1').fadeIn();
                         });
                         };               
                         current_link = "rotors1";
                    });
            
                    $('a.click_bases1').click(function() {
                         if (current_link == "rotors1") {
                         $('#rotors1').fadeOut(function () {
                             $('#bases1').fadeIn();
                         });
                         } else {
                         $('#onesies').fadeOut(function () {
                             $('#bases1').fadeIn();
                         });
                         };             
                         current_link = "bases1";
                    });
            
                    $('a.click_onesies').click(function() {
                         if (current_link == "rotors1") {
                         $('#rotors1').fadeOut(function () {
                             $('#onesies').fadeIn();
                         });
                         } else {
                         $('#bases1').fadeOut(function () {
                             $('#onesies').fadeIn();
                         });  
                         };             
                         current_link = "onesies";
                    });
                });

            Comment


            • #7
              You can try this out for a simplified version. Although, there is probably a syntax error somewhere.

              HTML Code:
              $(function() {
              	
              	var funcOnClick = 
              	(function() {
              	
              		var objCurrent = null;
              	
              		return function(objThis) {
              			if(!objCurrent) {
              				objThis.fadeIn(function() {
              					objCurrent = objThis;
              				});
              			} else if(objCurrent !== objThis) {
              				objCurrent.fadeOut(function() {
              					objThis.fadeIn(function() {
              						objCurrent = objThis;
              					});
              				});
              			}
              		}
              	
              	})();
              	
              	var objRotors = $('a.click_rotors');
              	var objBases1 = $('a.click_bases1');
              	var objOnsies = $('a.click_onesies');
              	
              	objRotors.click(function() {
              		funcOnClick(objRotors);
              	});
              	
              	objBases1.click(function() {
              		funcOnClick(objBases1);
              	});
              	
              	objOnsies.click(function() {
              		funcOnClick(objOnsies);
              	});
              
              });
              Tracking state like this has to do with closures not JQuery. The short verison is that a function in JavaScript has access to all variables defined outside of it. However, it does not have direct access to variables within nested functions - only things above. This makes it possible to bind a variable to a function explicitly then change it to track state. That is essentially what is happening with currentLink in the above code. The variable currentLink is bound to the returned function. making it possible to change it from within the scope of that returned function. Yet, keep it entirely out of the scope of everything besides that function. maybe some of that made some sense…

              It took a me a long time to understand closures and binding. However, once you do its a very powerful concept.
              Last edited by tZ; 09-15-2009, 01:19 AM.

              Comment


              • #8
                Originally posted by Two-Toe Tom View Post
                it's because you're just assigning "bases1" to $current_link. to test for equality you have to use ==.

                Thanks, its funny because I know that is how it is in Actionscript 3.0, but everything I found online never said anything about using two equal signs. It worked, thanks!

                Comment


                • #9
                  Originally posted by tZ View Post
                  You can try this out for a simplified version. Although, there is probably a syntax error somewhere.

                  HTML Code:
                  $(function() {
                  	
                  	var funcOnClick = 
                  	(function() {
                  	
                  		var objCurrent = null;
                  	
                  		return function(objThis) {
                  			if(!objCurrent) {
                  				objThis.fadeIn(function() {
                  					objCurrent = objThis;
                  				});
                  			} else if(objCurrent !== objThis) {
                  				objCurrent.fadeOut(function() {
                  					objThis.fadeIn(function() {
                  						objCurrent = objThis;
                  					});
                  				});
                  			}
                  		}
                  	
                  	})();
                  	
                  	var objRotors = $('a.click_rotors');
                  	var objBases1 = $('a.click_bases1');
                  	var objOnsies = $('a.click_onesies');
                  	
                  	objRotors.click(function() {
                  		funcOnClick(objRotors);
                  	});
                  	
                  	objBases1.click(function() {
                  		funcOnClick(objBases1);
                  	});
                  	
                  	objOnsies.click(function() {
                  		funcOnClick(objOnsies);
                  	});
                  
                  });
                  Tracking state like this has to do with closures not JQuery. The short verison is that a function in JavaScript has access to all variables defined outside of it. However, it does not have direct access to variables within nested functions - only things above. This makes it possible to bind a variable to a function explicitly then change it to track state. That is essentially what is happening with currentLink in the above code. The variable currentLink is bound to the returned function. making it possible to change it from within the scope of that returned function. Yet, keep it entirely out of the scope of everything besides that function. maybe some of that made some sense…

                  It took a me a long time to understand closures and binding. However, once you do its a very powerful concept.

                  Thanks tZ, I thought there had to have been a simpler way. I'll give it a try.

                  Comment

                  Mediabistro A division of Prometheus Global Media home | site map | advertising/sponsorships | careers | contact us | help courses | browse jobs | freelancers | content | member benefits | reprints & permissions terms of use | privacy policy Copyright © 2014 Mediabistro Inc. call (212) 389-2000 or email us
                  Working...
                  X