Active不適用于我的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');
    }
  })
})

.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 查詢代碼，但我不確定

uj5u.com熱心網友回復：

只需將 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')
    })
})

標籤：

上一篇：如何在CSS中創建無限文本尾部？

下一篇：它應該顯示被選中并隱藏的內容