ArmandoPerezjQ/Filters nothing


#1

THis is just a random comment on this project. This code doesn't filter anything. I have tried multiple ways of getting the red border around the certain elements but it just doesn't happen. Am i missing something here?

...
$(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");
  $(".all").addClass("selected");
                  }

});
};

$(document).ready(main);

...


#2

Ask an Advisor, please. We cannot access this (those who can read this post, that is).


#3

There are no Type of elements whose descriptors contain a dash. Not a thing in HTML. Either that or I need to hang up my spurs.

What is really troubling me is how there can be any sort of equality with a jQuery collection in a single variable that is not already that collection. We don't see that happening in this code.


#4

This is the actual code. It took me two days to figure it out using the code from above. There are a few errors. First of which is using double quotes instead of single quotes.

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);

/*It works perfectly for me*/


#5

This is not an error. We are free to choose. However, if the author of the SCT didn't allow for either and instead checks only for one or other, then we are bound to those expectations.

The instructions do not ask us to set them to selected.

Else if category is "nav-all", remove the class selected from all the <.thumbnail> elements.

In all actuality, we are free to choose the control flow device we implement. if..else if..else is one approach, but it gets bloated after a time. The switch statement is much better organized and not so code heavy.

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

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

// added code

    $('.thumbnail').removeClass('selected');  // universal applies to All

    switch (category) {
      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;
    } 

// end of added code

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