您可以使用JavaScript方法querySelectorAll()获取所有卡片，然后使用if语句按类别切换卡片的可见性。

尝试以下片段

$('button').on('click', function(){
  const cards = document.querySelectorAll('.card');
  for(card of cards){
    
    const cardCategory = card.getAttribute('category');
    const categoryOne = this.getAttribute('category-one');
    const categoryTwo = this.getAttribute('category-two');
    
    if(cardCategory ===  categoryOne || cardCategory ===  categoryTwo || categoryOne === 'all'){
      card.style.display = 'block';
    } else{
      card.style.display = 'none';
    }
  }
});

section{display:flex}
.card{
width:70px;
height:100px;
border:1px solid black;
margin:4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="card" category="cars" style="background-color:yellow"></div>
  <div class="card" category="cars" style="background-color:yellow"></div>
  <div class="card" category="apples" style="background-color:red"></div>
  <div class="card" category="trucks" style="background-color:green"></div>
  <div class="card" category="trucks" style="background-color:green"></div>
  <div class="card" category="trucks" style="background-color:green"></div>
</section>
<br>
<button category-one="cars">Cars</button>
<button category-one="apples">Apples</button>
<button category-one="trucks">Trucks</button>
<button category-one="trucks" category-two="apples">Trucks and Apples</button>
<button category-one="all">Show All</button>

也可以通过使用filter()方法来实现这一点：
一个一个三个一个一个一个一个一个四个一个一个一个一个一个五个一个