Active is not working on my jquery filter-CodePudding

I am trying to make active class on each category so each time I click on different category it shifts to other one but I am failing.

$(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 >
  <div >
    <div >
      <ul>
        <li  data-filter="all">ALL</li>
        <li  data-filter="B">B</li>
        <li  data-filter="C">C</li>
        <li  data-filter="D">D</li>
        <li  data-filter="M">M</li>
        <li  data-filter="U">U</li>
        <li  data-filter="C">C</li>
      </ul>
    </div>
  </div>
  <div >
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>

    <div ><img  src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div ><img  src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div ><img  src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>
    <div ><img  src="https://cdn3.vectorstock.com/i/1000x1000/27/52/orange-stock-iamge-vector-37112752.jpg" alt=""></div>


    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>
    <div ><img  src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg" alt=""></div>

The code is working fine all is good but the active class is not specific for each category I guess I have to edit the j query code but I am not sure about it

CodePudding user response：

Just change the jquery part to

$(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')
    })
})