jQuery addClass example

Change class name on click in jQuery

HTML

<div class="filter-control">
  <ul data-f1="a">
    <li><a data-f2="Chicago" href="#">Chicago</a></li>
    <li><a data-f2="Houston" href="#">Houston</a></li>
    <li><a data-f2="Dallas" href="#">Dallas</a></li>
  </ul>

  <ul data-f1="b">
    <li><a data-f2="Chicago" href="#">Chicago</a></li>
    <li><a data-f2="Houston" href="#">Houston</a></li>
    <li><a data-f2="Dallas" href="#">Dallas</a></li>
  </ul>

  <ul data-f1="c">
    <li><a data-f2="beer" href="#">beer</a></li>
    <li><a data-f2="whiskey" href="#">whiskey</a></li>
  </ul>
</div>

<div class="filteredblock a b c">

  <div class="a-Chicago b-Houston c-beer">Chicago Houston beer</div>
  <div class="a-Chicago b-Houston c-whiskey">Chicago Houston whiskey</div>
  <div class="a-Chicago b-Dallas c-beer">Chicago Dallas beer</div>
  <div class="a-Chicago b-Dallas c-whiskey">Chicago Dallas whiskey</div>
  <div class="a-Houston b-Chicago c-beer">Houston Chicago beer</div>
  <div class="a-Houston b-Chicago c-whiskey">Houston Chicago whiskey</div>
  <div class="a-Houston b-Dallas c-beer">Houston Dallas beer</div>
  <div class="a-Houston b-Dallas c-whiskey">Houston Dallas whiskey</div>
  <div class="a-Dallas b-Chicago c-beer">Dallas Chicago beer</div>
  <div class="a-Dallas b-Chicago c-whiskey">Dallas Chicago whiskey</div>
  <div class="a-Dallas b-Houston c-beer">Dallas Houston beer</div>
  <div class="a-Dallas b-Houston c-whiskey">Dallas Houston whiskey</div>

</div>

CSS

@charset "utf-8";
body {
  background: #fff;
  padding: 20px;
  font-family: Segoe UI Symbol;
  color: #000;
}

.filter-control li {
  list-style-type: none;
}
.filter-control li:not(.checked):before {
  content: '☐';
}
.filter-control li.checked:before {
  content: '☑';
}

.filteredblock > div {
  color: #fff;
}

.filteredblock.a.b.c > div,
.filteredblock.a-Chicago > .a-Chicago,
.filteredblock.a-Houston > .a-Houston,
.filteredblock.a-Dallas > .a-Dallas,
.filteredblock.b-Chicago > .b-Chicago,
.filteredblock.b-Houston > .b-Houston,
.filteredblock.b-Dallas > .b-Dallas,
.filteredblock.c-beer > .c-beer,
.filteredblock.c-whiskey > .c-whiskey {
  color: #000;
}

.filteredblock:not(.a):not(.a-Chicago) > .a-Chicago,
.filteredblock:not(.a):not(.a-Houston) > .a-Houston,
.filteredblock:not(.a):not(.a-Dallas) > .a-Dallas,
.filteredblock:not(.b):not(.b-Chicago) > .b-Chicago,
.filteredblock:not(.b):not(.b-Houston) > .b-Houston,
.filteredblock:not(.b):not(.b-Dallas) > .b-Dallas,
.filteredblock:not(.c):not(.c-beer) > .c-beer,
.filteredblock:not(.c):not(.c-whiskey) > .c-whiskey {
  color: #fff;
}

JavaScript

$(function () {
  var $list = $('.filteredblock');
	$('.filter-control a').on('click', (e) => {
  	var $a = $(e.target);
    var $li = $a.parent();
    var $ul = $li.parent();
    var f1 = $ul.data('f1');
    var f2 = $a.data('f2');
    
    $li.toggleClass('checked');
    if ($li.hasClass('checked')) {
    	$list.addClass(`${f1}-${f2}`).removeClass(`${f1}`);
    } else {
    	$list.removeClass(`${f1}-${f2}`);
      if (!$ul.find('.checked').length)
      	$list.addClass(`${f1}`);
    }
    return false;
  });
});