Thumbnails not highlighting


#1

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

my code seems to be correct. What am I forgetting?


#2

Hi Luis,

$('li').attr("class");

will return the value of the class attribute on each <li> element. The dot (.) before a class name is only for when you are selecting something by it's class name.
So you should change all of your category checks to be just the value (for example, nav-consumer) without the dot in front :slightly_smiling:


#3

a bit shorter version

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

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

if (category==="nav-consumer"){

  $('.consumer').addClass('selected');

}
else if(category === "nav-mobile") {

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

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

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

}

});
};

$(document).ready(main);