Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Paul Jackson
Paul Jackson
8,943 Points

If/Else statements with JQuery

Can I make an If/Else statement using just JQuery like this: 

var hideSend = $(".submitButton").hide();

    if ($(".scheduleButton").show())    
            {hideSend}
    else if ($(".saveButton").show())
        {hideSend}
    else if ($(".queueButton").show())
        {hideSend}
    else {$(".submitButton").show();}
Lin Lu
Lin Lu
29,171 Points

Could you explain what you are trying to do?

Paul Jackson
Paul Jackson
8,943 Points

I have a task manager with three task buttons and a Submit button. The Submit button's text should change to "Schedule," "Queue," or "Save" depending on which of the three task buttons you've clicked on. If you've clicked off of them or haven't yet clicked on any, the Submit button should read "Send."

The way I've approached it is creating 4 Submit buttons total and I'm trying to get them to show/hide at the appropriate times, while only showing one at a time, depending on if you've clicked a task button and which one.

I'm having problems getting just one of the Submit text options to show, especially while clicking from one task button to another.

It seemed like the best way to tackle it would be to use an If/Else statement saying: "If the Save button is showing, hide the Send button and so on. Otherwise, show the "Send" button.

Jeff Everhart
Jeff Everhart
21,732 Points

So, I don't think the show method works the way you want it to. It is used to actually "show" a DOM element or group of elements. Some jQuery methods are both getters and setters, meaning that some retrieve and return a specific value and others will set a value or property. The show method only sets this show property to make DOM elements visible.

Based on your other comments, it might make sense to bind your hideSend method to an on click event. So, when the scheduleButton is clicked, it fires the method.

What you want to do is totally doable, we'll just need to use different methods to make it happen. Can you post a link to a JSFiddle or CodePen with the JS, HTML, and CSS, or just post the other code here as well.

1 Answer

Dan Garrison
Dan Garrison
22,457 Points

Hmm...First of all, I wouldn't use the jQuery method show() to check to see if an element is showing. That method is used to show elements that have previously been hidden via css or jQuery not to check if that element is showing or not. Also, remember that once one of those conditional statements evaluates to true, the rest of the conditional statements will not run. If you need to check all buttons, you might need to loop through using the each() method.

I think the following jQuery methods would probably suit your purposes a bit better:

This would involve setting up a class on your CSS page with the display: none property. You could then check if the element has the class and add and remove it as needed. The each() method might also be useful if you need to loop through the set of elements.