Curious about classes correspondence in Armando Perez project


#1

So after few tries my code is working well.
The only thing i'm curious about is strange mechanism of correspondence of classes between source code in html. tab and sorting code in js. tab.

Does anyone have a thought, why the ('.consumer') class reference if this fragment

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

looks just how it looks, but not rather like ('.consumer thumbnail'), as it is pointed out in html tab?

Did i just missed something?

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1>Armando P&eacute;rez</h1>
          </div>
          <div class="pull-right">
            
            <ul class="nav nav-pills">
              <li class="nav-all active"><a href="#">All</a></li>
              <li class="nav-consumer"><a href="#">Consumer</a></li>
              <li class="nav-mobile"><a href="#">Mobile</a></li>
              <li class="nav-commerce"><a href="#" >Commerce</a></li>
              <li class="nav-enterprise"><a href="#">Enterprise</a></li>
            </ul>
            
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="container">
        
        <div class="row">
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p1.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p2.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="consumer thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p3.jpg">
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p4.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="enterprise thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p5.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p6.jpg">
            </a>
          </div>
        </div>

        <div class="row">
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p7.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="commerce thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p8.jpg">
            </a>
          </div>
          <div class="col-md-4">
            <a class="mobile thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/2/armando-perez/p9.jpg">
            </a>
          </div>
        </div>
      </div>
    </div>
    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>


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

#2

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