Step 2


#1


https://www.codecademy.com/courses/jquery-ext/projects/jquery-prj_armando-perez


Would someone please re-write the directions for step #2, please?


Replace this line with your code.


#2

Do you know how to select an attribute?


#3

Reading up on attr()...

Basic example gleaned so far:

$(element).attr('attribute_name');

Where 'attribute_name' can refer to any attribute which is added in to the targetted HTML element tag (id, class, name, title, src, etc.)


#4

var resolved = false;
return resolved;

hahaha....

Iterating back to the first post of this thread...

What is meant by:

...first select all the .thumbnail elements and remove the class selected. Then select all the .consumer elements, and add the class selected.

#5

Write a selector for all nodes of .thumbnail. Use the .removeClass() method to remove the .selected value from all collected nodes. That will remove the red border from any that were previously activated.

The .attr() method will come in handy for something else, but I don't want to give it away. I'd like to see what you come up with for the remaining steps.


#6

Thanks Roy. That explanation makes a bit more sense.

These things are being mulled over.

Happy New Year too.


#7

So, I've come up with these two alternatives...

var main = function() {
  $('.nav li').click(function() {
    var category = $(this).attr('class');
	$('.thumbnail').removeClass('selected');
...

or

var main = function() {
$('.thumbnail').removeClass('selected');
  $('.nav li').click(function() {
    var category = $(this).attr('class');
...

Comments are sought on this code.


#8

That line will only execute once... at load time. Chances are none of them have the class yet, but that is moot. Nothing will happen.

It needs to be inside the handler function so it updates on every click event that triggers the handler.

These are sibling statements, no nesting involved. Very good use of attr(). Now I'm looking forward to see how you implement it.


#9

To complete step 2 as you've outlined, I came up with this:

var main = function() {
	$('.nav li').click(function() {
		var category = $(this).attr('class');
		$('.thumbnail').removeClass('selected');
		if (category === "nav-consumer") {
			$('.consumer thumbnail').addClass('selected');
		};

	// $('.nav li').removeClass('active');
    // $(this).addClass('active');
	});
};
 
$(document).ready(main);

#10

There are four categories in all, making for a rather large if statement. Can you think of a more streamlined way to do this?


#11

Oh yes, yes.

I was following an amalgamation of your recent directions (above) and the official directions for step #2 exclusively; in other words, focusing purely on the selection of elements utilizing the class "nav-consumer".


#12

That will be one of the four categories. Getting any ideas how to incorporate them all into a single statement?


#13

Possibly if-else or case statements.


#14

I would go that route. One statement, great structure and extendable (easy to maintain).

Tip:

switch (expression) {
case ...:
    break;
default: ''
}

To make the switch more easily read, do not indent the case or default lines, only their content. Makes for cleaner code without excess indentation.

Not much of a tip for this exercise. There is very little indentation. Using 2 spaces works fine and reads.

I'm anxious to see you complete the switch for this so we can go to the next level.


#15

Thanks for the refresher on the Case Statement.

In addition, I'm not seeing the images highlighted as expected after clicking on the list elements in the online classroom environment. (Code below from one of our earlier posts)

var main = function() {
$('.nav li').click(function() {
	var category = $(this).attr('class');
	$('.thumbnail').removeClass('selected');
	if (category === "nav-consumer") {
			$('.consumer thumbnail').addClass('selected');
	};

	// $('.nav li').removeClass('active');
    // $(this).addClass('active');
	});
};
 
$(document).ready(main);

#16

This selector targets a thumbnail child element, which does not exist.

class='consumer thumbnail"    => co-classes

.consumer .thumbnail          => descendent selector

Just use the consumer class in your selector. We can ignore that your selector has a error.


#17

Ahhh..... tripped up again by a CSS issue. Some day I'll have to go back and brush up on compounding classes. Thanks for pointing out my error.

It appears that my final working solution would then be:


var main = function() {
    $('.nav li').click(function() {
        var category = $(this).attr('class');
        $('.thumbnail').removeClass('selected');
        switch(category) {
        case 'nav-all active':
            $('.thumbnail').addClass('selected');
            break;
        case 'nav-consumer':
            $('.consumer').addClass('selected');
            break;
        case 'nav-mobile':
            $('.mobile').addClass('selected');
            break;
        case 'nav-commerce':
            $('.commerce').addClass('selected');
            break;
        case 'nav-enterprise':
            $('.enterprise').addClass('selected');
            break;	
        default:
            // default
        };
    });
};

#18

I don't think we need to include nav-all in the cases. Clicking that should remove the border on all the thumbnails (like a reset, sort of).

I took the liberty to edit your code to make it more readable. Looks good apart from the unnecessary case. Well done!

Now we can take a closer look to see if we can refine this some more. Notice that all the case categories are similar to the action classes?

nav-consumer    => consumer
nav-mobile      => mobile
nav-commerce    => commerce
nav-enterprise  => enterprise

This suggest a common relation. We can extract the thumbnail class from the category class. This is going to make you mad when you see what we can do in a single line, making the switch unnecessary.

It was important that we reached this point by writing out the verbose code. That's how we find ways to refine our code. It's like writing a thousand word essay. We start by writing a four thousand word essay that includes all our ideas, arguments and supporting topics. Then we begin whittling it down to a shorter and more concise form until we get it down to the 1000 words the teacher is expecting. Coding is much the same. Get our ideas out on paper, then examine and refine.


var main = function() {
    $('.nav li').click(function() {
        var category = "." + $(this).attr('class').substring(4);
        $('.nav li').removeClass('active');
        $(this).addClass('active');
        $('.thumbnail').removeClass('selected');
        $(category).addClass('selected');
    });
};

#19

Hmm....

Without looking at your solution, I seem to recall a way of removing characters from a string using javascript. I'll read up on it again.

Thanks for the hint.


#20

Ok. I can see that your solution is..... more elegant; it's less code, there is no iterative loop, etc.

I had to delve into the CSS more to try and grasp what was going on in terms of selecting the thumbnails and the active states of the list elements. Using the active styles for those list elements I'm still not a hundred percent on, but I get what's going on there.

One thing that got me to tilt my head curiously is the manner in which the list and image/thumbnails elements get de-emphasized and then emphasized. It appears that that portion of the code is executed in a linear fashion and that removing a class and then adding it back again within the same event handler works as expected.