More jQuery Help Needed...

[Saint Nick]

So given the following bit of code:

    var spinStatus = true;
    $("#spin").click(
        function()
        {
            if (spinStatus == true)
            {
                $("#spin").attr('src', "../funktrek_new/images/btn_spinon.png");
                spinStatus = false;
            }
            
            if (spinStatus == false)
            {
                $("#spin").attr('src', "../funktrek_new/images/btn_spinoff.png");
                spinStatus = true;
                alert(spinStatus);
            }
        }
    );

This is supposed to swap images of "spin on" and "spin off" whenever the user clicks on the div id. However, it never seems to make it into the spinStatus==false IF block. It will work the first time, switching from btn_spinoff.png to btn_spinon.png, but never vice versa. The alerts reveal that it is a false going in, and a false coming out. Not sure what I'm doing wrong...

Thanks in advance!

 

[Saint Nick]

....

 

[Gunslinger08]

For future reference, jQuery selectors are basically CSS selectors with some extra stuff tacked on. Your basic ones are #<id> or .class-name. You can get fancier for selecting children/descendants, selecting by an attribute value, selecting the first instance only, etc. This is a good reference: http://api.jquery.com/category/selectors/

 

[Saint Nick]

Thanks for the tip Josh. jQuery is a new beast to me but it hasn't been too hard figuring out how to get things to work. It seems that with coding websites there are lots of ways to accomplish a task. I wish there were specific guidelines or best practices when it came to web design. And I'm sure there are... I just don't know how to find them when trying to design a very specific aspect of a site.

 

[Saint Nick]

Bump, new issue using JavaScript/jQuery

 

[beginner99]

Don't see a problem but I recommend using Firebug:

https://addons.mozilla.org/de/firefox/addon/firebug/

for debugging JavaScript and in general for web development.

Now after further thinking:

Is this piece of code in document.ready function?

eg:

$(function() {  
    //Do something here  
});

or

$(document).ready(function() {
    //Do something here  
});

If no put it in there

 

[Saint Nick]

I am using Firebug 🙂 However I only use it for HTML/CSS live modifications..not sure how to use it with JavaScript :S

 

[Saint Nick]

If no put it in there

I did as you suggest, but now all of my jQuery stuff is broke:

    $(function {
            var spinStatus = true;
            $("#spin").click(
                function()
                {
                    if (spinStatus == true)
                    {
                        $("#spin").attr('src', "../funktrek_new/images/btn_spinon.png");
                        spinStatus = false;
                    }
                    
                    if (spinStatus == false)
                    {
                        $("#spin").attr('src', "../funktrek_new/images/btn_spinoff.png");
                        spinStatus = true;
                    }
                }
            );        
    });

For what it is worth, I am calling other .click outside of $(document).ready and they work great.

 

[Saint Nick]

Nevermind, I did as you said and put all of my jQuery inside of the $(). WOrking great now!!!

 

[veri745]

The obvious problem here is that your two 'if' statements are independent of each other, you should be using 'else if' instead of a second if, or else the first if will stop the spinning, and the second one will just start it again.

As it is now, spinStatus will always result in "true"

 

[Leros]

veri is right.

If spin status is true, this is what happens (comments in red):

 $(function {
            var spinStatus = true;
            $("#spin").click(
                function()
                {
                    [COLOR="Red"]//spinStatus is true, so we're going to go in this if block[/COLOR]
                    if (spinStatus == true)
                    {
                        $("#spin").attr('src', "../funktrek_new/images/btn_spinon.png");
                        spinStatus = false;
                    }
                    [COLOR="Red"]// now that we're out of that if block, spinStatus is false[/COLOR]
                    
                    [COLOR="Red"]// now spinStatus is false, so we're going to go
                    // into this if block too[/COLOR]
                    if (spinStatus == false)
                    {
                        $("#spin").attr('src', "../funktrek_new/images/btn_spinoff.png");
                        spinStatus = true;
                    }
                }
            );        
    });

You can fix this by using an if-else block:

if (spinStatus == true) {
    // do stuff
} else {
    // do other stuff
}

 

[Saint Nick]

Hey guys, I ended up using a return in my if statements. Currently I am still using two IF statements with returns in them. Is this a bad practice? Either way (bad or good practice), I plan on fixing it the way you are talking about tonight. Lol @ my logic...setting it to false, then checking if its false and setting it true again haha

 

[sourceninja]

Hey guys, I ended up using a return in my if statements. Currently I am still using two IF statements with returns in them. Is this a bad practice? Either way (bad or good practice), I plan on fixing it the way you are talking about tonight. Lol @ my logic...setting it to false, then checking if its false and setting it true again haha

I would think the if-else or even if-elseif is a better way to go than returns.

 

[Saint Nick]

I agree, and plan to make those changes. Just wondering about best practices. THanks everyone!!!

 

[veri745]

I agree, and plan to make those changes. Just wondering about best practices. THanks everyone!!!

I generally do it one of two ways

if (something) {
  //Do thing1
  return;
}

//Do thing2
return;

or

if (something) {
  //Do thing1
}
else {
  //Do thing2
}
return;

Which one I use depends on the return type of the function and how complex it is.

It also depends on how different thing1 and thing2 are.