引导程序过滤库

Question

我已经尝试制作一个筛选库3天了，根本没有成功。我找到的每个代码，或由我自己编写的每个代码均无效。我正在使用入门级bootstrap 4模板，该模板包含最新的JQuery版本，所以我一点也不知道，为什么它不起作用，应该如此。 js文件也已连接到HTML。

HTML

<section id="projects" class="padding">
        <div class="row">
            <div class="d-flex justify-content-center col-12">
                <div class="projects-filter">
                    <button class="btn btn-outline current" data-filter="*">Összes</button>
                    <button class="btn btn-outline" data-filter="kiemelt">Kiemelt</button>
                    <button class="btn btn-outline" data-filter="molinok">Molinók</button>
                    <button class="btn btn-outline" data-filter="berendezesek">Berendezések</button>
                    <button class="btn btn-outline" data-filter="iparmuveszet">Iparművészet</button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="projects-content d-flex justify-content-center">
                <div class="single-project col-4 molinok">
                    <div class="single-project-image">
                        <img src="img/projects/alutechnika01.jpg" class="img-fluid">
                    </div>
                    <div class="single-project-desc">
                        <h5>Lorem ipsum</h5>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
                <div class="single-project col-4 kiemelt">
                    <div class="single-project-image">
                        <img src="img/projects/alutechnika01.jpg" class="img-fluid">
                    </div>
                    <div class="single-project-desc">
                        <h5>Lorem ipsum</h5>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
                <div class="single-project col-4 molinok">
                    <div class="single-project-image">
                        <img src="img/projects/alutechnika01.jpg" class="img-fluid">
                    </div>
                    <div class="single-project-desc">
                        <h5>Lorem ipsum</h5>
                        <p>Lorem ipsum dolor sit amet</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

Javascript：

$(window).load(function(){
var $container = $('.projects-content');
$container.isotope({
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
    }
});

$('.projects-filter button').click(function(){
    $('.projects-filter .current').removeClass('current');
    $(this).addClass('current');

    var selector = $(this).attr('data-filter');
    $container.isotope({
        filter: selector,
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
     });
     return false;
    }); 
});

Answer 1

在filter:selector中，在selector之前加上.，使其成为className。来源-https://isotope.metafizzy.co/filtering.html。

var $container = $('.projects-content');
$container.isotope({
  filter: '*',
  animationOptions: {
    duration: 750,
    easing: 'linear',
    queue: false
  }
});

$('.projects-filter button').click(function() {
  $('.projects-filter .current').removeClass('current');
  $(this).addClass('current');

  var selector = $(this).attr('data-filter');

  $container.isotope({
    filter: (selector == '*') ? '*' : '.' + selector,
    animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false
    }
  });
  return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<section id="projects" class="padding">
  <div class="row">
    <div class="d-flex justify-content-center col-12">
      <div class="projects-filter">
        <button class="btn btn-outline current" data-filter="*">Összes</button>
        <button class="btn btn-outline" data-filter="kiemelt">Kiemelt</button>
        <button class="btn btn-outline" data-filter="molinok">Molinók</button>
        <button class="btn btn-outline" data-filter="berendezesek">Berendezések</button>
        <button class="btn btn-outline" data-filter="iparmuveszet">Iparművészet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="projects-content d-flex justify-content-center">
      <div class="single-project col-4 molinok">
        <div class="single-project-image">
          <img src="img/projects/alutechnika01.jpg" class="img-fluid">
        </div>
        <div class="single-project-desc">
          <h5>Lorem ipsum</h5>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="single-project col-4 kiemelt">
        <div class="single-project-image">
          <img src="img/projects/alutechnika01.jpg" class="img-fluid">
        </div>
        <div class="single-project-desc">
          <h5>Lorem ipsum</h5>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
      <div class="single-project col-4 molinok">
        <div class="single-project-image">
          <img src="img/projects/alutechnika01.jpg" class="img-fluid">
        </div>
        <div class="single-project-desc">
          <h5>Lorem ipsum</h5>
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
</section>