[Solved] Armando Pérez - Cant get it to work


#1

Hi,

I'm giving the Armando Pérez project a go but I cant figure out why my code won't work.

Here is the task:

Part 2: In app.js, when a nav < li > is clicked, its class is retrieved using .attr() and saved into the variable category. If category is "nav-consumer", first select all the .thumbnail elements and remove the class selected. Then select all the .consumer elements, and add the class selected.

Here is my code:

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

    $('.nav li').removeClass('active');
    $(this).addClass('active');
---------------------------------------------
/* The code above is provided and I haven't changed any of it - This code (I think) sets the variable 'category' as the class you click on, e.g. '.nav-consumer'. The two lines below I don't get what they are there for.....removes all the classes then adds the class back onto the selected one?*/
    
    if(category == "nav-consumer"){
      $('.thumbnail').removeClass('active');
      $('.consumer').addClass('active');
    };

  });
};
 
$(document).ready(main);

Now following from the task the code above I have written which should remove the class from all the thumbnail elements and add a class to the consumer element(if its clicked on). But it doesn't work for some reason. Any help would be greatly appreciated, been stuck on this for ages now.

Thanks in advance!


#2

Hey Saman,

That's correct :slightly_smiling:

As far as what's wrong with your code, there isn't really anything wrong with it, just a simple typo. Instead of adding the active class to the thumbnail images, add (and remove) the selected to them, and your code will work :slightly_smiling:


#3

If anyone else is stuck here is my final code which works thanks to @zystvan and the codecademy team.

var main = function() {
    $('.nav li').click(function() {
        var category = $(this).attr('class');
        $('.nav li').removeClass('active');
        $(this).addClass('active');
        if (category === 'nav-consumer') {
            $('.thumbnail').removeClass('selected');
            $('.consumer').addClass('selected');       
        } else if (category === 'nav-mobile') {
            $('.thumbnail').removeClass('selected');
            $('.mobile').addClass('selected');
        } else if (category === 'nav-commerce') {
            $('.thumbnail').removeClass('selected');
            $('.commerce').addClass('selected');
        } else if (category === 'nav-enterprise') {
            $('.thumbnail').removeClass('selected');
            $('.enterprise').addClass('selected');
        } else if (category === 'nav-all') {
            $('.thumbnail').removeClass('selected');
        }
    });
};
 
$(document).ready(main);

#4

Here's a working version of the code that includes the working if portion commented out, and in its place a switch statement that does the same thing:

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

$('.nav li').removeClass('active');
$(this).addClass('active');

switch (category) {
  case "nav-all":
    $('.thumbnail').removeClass('selected');
    break;
  case "nav-consumer":
    $('.thumbnail').removeClass('selected');
    $('.consumer').addClass('selected');
   	break;
  case "nav-mobile":
    $('.thumbnail').removeClass('selected');
    $('.mobile').addClass('selected');
    break;
  case "nav-commerce":
    $('.thumbnail').removeClass('selected');
    $('.commerce').addClass('selected'); 
    break;
  case "nav-enterprise":
    $('.thumbnail').removeClass('selected');
    $('.enterprise').addClass('selected');
    break;

  default:
}
/*if (category==='nav-consumer') {
  $('.thumbnail').removeClass('selected');
  $('.consumer').addClass('selected');
}

else if(category==='nav-mobile') {
  $('.thumbnail').removeClass('selected');
  $('.mobile').addClass('selected');
}

else if(category==='nav-commerce') {
   $('.thumbnail').removeClass('selected');
   $('.commerce').addClass('selected');
}

else if(category==='nav-enterprise') {
   $('.thumbnail').removeClass('selected');
   $('.enterprise').addClass('selected');
}

else if (category==='nav-all') {
   $('.thumbnail').removeClass('selected'); 

}*/

});
};

$(document).ready(main);


#5

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.