为什么我的带有 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？这是它应该失败的唯一原因。

我运行您的代码，一切正常。看一下代码sn -p （因为没有到达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>

您也可以查看this fiddle。一切都应该按预期工作（fadeOut、fadeIn）。