为什么我的带有 js 和 bootstrap 4 的过滤器不起作用？

Question

我尝试在 html 和 java 脚本中制作过滤器，但过滤器不起作用，我看过并查看了展示过滤器内容的视频课程，但我没有发现错误。 我确保文件已连接，事实上它是。 （我正在使用 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

您是否正确导入了 jQuery？ 这是它应该失败的唯一原因。

我运行您的代码，一切正常。 看一下代码片段（因为没有到达 Bootstrap 的md断点，所以项目一个一个地排列在另一个之下）：

 $('.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>

你也可以看看这个小提琴。 一切都应该按预期工作（ fadeOut ， fadeIn ）。