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 {
  color: #000;
}

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;
  });

  var list = [
    {
      name: 'a',
      list: [
        'Chicago',
        'Houston',
        'Dallas'
      ]
    },
    {
      name: 'b',
      list: [
        'Chicago',
        'Houston',
        'Dallas'
      ]
    },
    {
      name: 'c',
      list: [
        'beer',
        'whiskey'
      ]
    }
  ];
  var addCSS = function (selector, style) {
    var sheet = window.document.styleSheets[window.document.styleSheets.length - 1];
    sheet.addRule(selector, style);
  };

  var selector1 = [];
  var selector2 = [];
  list.forEach((f1) => {
    f1.list.forEach((f2) => {
      selector1.push(`.filteredblock.${f1.name}-${f2} > .${f1.name}-${f2}`);
      selector2.push(`.filteredblock:not(.${f1.name}):not(.${f1.name}-${f2}) > .${f1.name}-${f2}`);
    });
  });

  addCSS(selector1.join(', '), 'color: #000;');
  addCSS(selector2.join(', '), 'color: #fff;');
});