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

Alex Flores
Alex Flores
7,864 Points
Posted by Alex Flores
Alex Flores
7,864 Points

Which code is better (JavaScript)?

I'm just curious, both of these codes work, but I'm wondering which one is better to use?
You can see them both here (https://jsfiddle.net/#&togetherjs=cs8GNr1BBB) and the other one I couldn't get to work in jsfiddle, but it actually works better. 

$(document).ready(function() {

    $("#info-click").click(function(e) {
    e.preventDefault()
        $("#pages, #information").removeClass("hide");
        $("#portfolio, #contact").addClass("hide");
    });  

    $("#port-click").click(function(e) {
    e.preventDefault()
        $("#pages, #portfolio").removeClass("hide");
        $("#information, #contact").addClass("hide");
    });  
    $("#contact-click").click(function(e) {
    e.preventDefault()
        $("#pages, #contact").removeClass("hide");
        $("#information, #portfolio").addClass("hide");
    });  
});

You'll notice in the first one, the div being hidden shows briefly before disappearing - how can I stop this?

2 Answers

Nathan Ward
Nathan Ward
7,907 Points
Nathan Ward
Nathan Ward
7,907 Points

Hi,

If you are talking about this line:

$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');

The .page is the class and the "+" is concatenation to add the variable "page" as the data attribute. If you want all of the 'page' elements hidden on page load then you will need to add a conditional statement to see if there is a currently showing '.page' for example:

$(document).ready(function() {
    $("#menu li a").on('click', function(e) {
        e.preventDefault()
        var page = $(this).data('page');
        if($("#pages .page:not('.hide')").length){
            $("#pages .page:not('.hide')").stop().fadeOut('fast', function() {
                $(this).addClass('hide');
                $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
            });
        } else {
            $('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');
        }
    });
});
Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Hey Nathan,

Thanks again for helping out. I think I get just about everything except for that one line: 

$('#pages .page[data-page="'+page+'"]').fadeIn('slow').removeClass('hide');

The code doesn't work if you put a space between ".page" and "[data-page="'+page+'"]" and I'm not sure why. I would think the compiler would have no idea what this is, because it would read it all in one big string and there is nothing named ".pagedata-page=attribute". I know (think I know) it's ultimately reading "#pages .page data-page=information". But I don't know how the compiler knows that. My knowledge on selectors must be off and I can't seem to find a good website to give me that information....

I was reading up a on a lot of sites trying to find the answer before I asked you, but then I found it after i posted this... I think sums it up very well (http://stackoverflow.com/questions/6246683/combining-a-class-selector-and-an-attribute-selector-with-jquery) .

Thanks again, Nathan!

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Moving at a snails pace here.. but I'm reviewing your second line of code and after some google searching, I found out the trick of using ".length" to find whether the element exists. Now, the page I found doesn't provide any details as to why this works the way it does and after reviewing jquery documentation, nothing really tells me why this would work either.

So I've come to the conclusion that this is just a JS trick that doesn't necessarily have any logic behind it, which one wouldn't know unless they have seen it used before. Is this right or is there a logical reason why this works?

Nathan Ward
Nathan Ward
7,907 Points
Nathan Ward
Nathan Ward
7,907 Points

Hi,

From my original code which can be found here: https://jsfiddle.net/71bcwffj/ I added the new fading in div to the callback function of the div that fades out. This should stop any strange behavior that is happening as the div will only fade in once the other div has been hidden.

I believe that my answer is the best as it promotes DRY code, to learn more about this go here: http://stackoverflow.com/questions/6453235/what-does-damp-not-dry-mean-when-talking-about-unit-tests

Also you haven't included jQuery in the external sources for you jsFiddle so it wont work.