Active 不适用于我的 jquery 过滤器

Question

我正在尝试在每个类别上创建活动课程，所以每次我点击不同的类别时，它都会转移到另一个类别，但我失败了。

$(document).ready(function() {
  $('.list-inline-item').click(function() {
    const value = $(this).attr('data-filter');
    if (value == 'all') {
      $('.clients').show('1000');
    } else {

      $('.clients').not('.' + value).hide('1000');
      $('.clients').filter('.' + value).show('1000');
    }
  })
})

.list-inline-item {
  color: #000000;
  background-color: white;
  font-weight: 500;
  padding: 15px;
}

.active {
  color: #b42727;
  background-color: white;
}

.list-inline-item:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid clientbox text-center py-5">
  <div class="row">
    <div class="col-12">
      <ul>
        <li class="list-inline-item active" data-filter="all">ALL</li>
        <li class="list-inline-item" data-filter="B">B</li>
        <li class="list-inline-item" data-filter="C">C</li>
        <li class="list-inline-item" data-filter="D">D</li>
        <li class="list-inline-item" data-filter="M">M</li>
        <li class="list-inline-item" data-filter="U">U</li>
        <li class="list-inline-item" data-filter="C">C</li>
      </ul>
    </div>
  </div>
  <div class="row g-3">
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>

    <div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div class="clients D col-6 col-md-4 col-lg-3"><img class=" img-fluid " src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>


    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div class="clients B col-6 col-md-4 col-lg-3 col-lg-3"><img class="img-fluid " src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>

代码运行良好，一切都很好，但活动类并不特定于每个类别我想我必须编辑 j 查询代码，但我不确定

Answer 1

只需将 jquery 部分更改为

$(document).ready(function (){
    $('.list-inline-item').click(function(){
        const value = $(this).attr('data-filter');
        if(value == 'all'){
            $('.clients').show('1000');
        }
        else{ 

            $('.clients').not('.'+value).hide('1000');
            $('.clients').filter('.'+value).show('1000');
        }

        $(this).addClass('active').siblings().removeClass('active')
    })
})