Why my filter with js and bootstrap 4 it isn´t working?

Question

I have tried to make a filter in html and java script, but the filter just does not work, I have seen and reviewed the video lesson which presents the content of the filter, but I did not find the error. And I made sure that the file was connected, and in fact it is. ( I´m using with Bootstrap 4)

JS:

$('.filter-btn').on('click', function() {

    let type = $(this).attr('id');
    let boxes = $('.project-box');

    $('.main-btn').removeClass('active');
    $(this).addClass('active');

    if(type == 'dsg-btn') {
      eachBoxes('dsg', boxes);
    } else if(type == 'dev-btn') {
      eachBoxes('dev', boxes);
    } else if(type == 'seo-btn') {
      eachBoxes('seo', boxes);
    } else {
      eachBoxes('all', boxes);
    }
  });
  function eachBoxes(type, boxes) {
    if(type == 'all') {
      $(boxes).fadeIn();
    } else {
      $(boxes).each(function() {
        if(!$(this).hasClass(type)) {
          $(this).fadeOut('slow');
        } else {
          $(this).fadeIn();
        }
      });
    }
  }

HTML:

<div id="portfolio-area">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h3 class="main-title">Conheça nossos projetos</h3>
      </div>
      <div class="col-md-12" id="filter-btn-box">
        <button class="main-btn filter-btn active" id="all-btn">Todos</button>
        <button class="main-btn filter-btn" id="dev-btn">Pisos</button>
        <button class="main-btn filter-btn" id="dsg-btn">Rodapé</button>
        <button class="main-btn filter-btn" id="seo-btn">Pisos e Rodapés</button>
      </div>
      <div class="col-md-4 project-box dev">
        <img src="imgs/11.jpeg" class="img-fluid" alt="Projeto 1">
      </div>
      <div class="col-md-4 project-box dsg">
        <img src="imgs/12.jpeg" class="img-fluid" alt="Projeto 2">
      </div>
      <div class="col-md-4 project-box seo">
        <img src="imgs/13.jpeg" class="img-fluid" alt="Projeto 3">
      </div>
      <div class="col-md-4 project-box dev">
        <img src="imgs/14.jpeg" class="img-fluid" alt="Projeto 4">
      </div>
      <div class="col-md-4 project-box dsg">
        <img src="imgs/15.jpeg" class="img-fluid" alt="Projeto 5">
      </div>
      <div class="col-md-4 project-box seo">
        <img src="imgs/16.jpeg" class="img-fluid" alt="Projeto 6">
      </div>
    </div>
  </div>
</div>




Jquery connection

 <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="js/jquery.js"></script>
        <script src="js/popper.js"></script>
        <script src="js/bootstrap.js"></script>

Answer 1

Have you imported jQuery properly? That's the only reason it should fail.

I run your code and everything works properly. Have a look at the code snippet (items are arranged one below the other because the md breakpoint of Bootstrap is not reached):

 $('.filter-btn').on('click', function() { let type = $(this).attr('id'); let boxes = $('.project-box'); $('.main-btn').removeClass('active'); $(this).addClass('active'); if(type == 'dsg-btn') { eachBoxes('dsg', boxes); } else if(type == 'dev-btn') { eachBoxes('dev', boxes); } else if(type == 'seo-btn') { eachBoxes('seo', boxes); } else { eachBoxes('all', boxes); } }); function eachBoxes(type, boxes) { if(type == 'all') { $(boxes).fadeIn(); } else { $(boxes).each(function() { if(.($(this).hasClass(type))) { $(this);fadeOut('slow'). } else { $(this);fadeIn(); } }); } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="portfolio-area"> <div class="container"> <div class="row"> <div class="col-md-12"> <h3 class="main-title">Conheça nossos projetos</h3> </div> <div class="col-md-12" id="filter-btn-box"> <button class="main-btn filter-btn active" id="all-btn">Todos</button> <button class="main-btn filter-btn" id="dev-btn">Pisos</button> <button class="main-btn filter-btn" id="dsg-btn">Rodapé</button> <button class="main-btn filter-btn" id="seo-btn">Pisos e Rodapés</button> </div> <div class="col-md-4 project-box dev"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 1"> </div> <div class="col-md-4 project-box dsg"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 2"> </div> <div class="col-md-4 project-box seo"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 3"> </div> <div class="col-md-4 project-box dev"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 4"> </div> <div class="col-md-4 project-box dsg"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 5"> </div> <div class="col-md-4 project-box seo"> <img src="https://via.placeholder.com/150" class="img-fluid" alt="Projeto 6"> </div> </div> </div> </div>

You can also have a look at this fiddle . Everything should work ( fadeOut , fadeIn ) as expected.