Filter based on multiple classes using jQuery

Question

I have this script that will mainly show a product or products based on class names. Therefore, if li has the class name "c2", it will show the product c2, if li has the class names "b8f b12r a12 ps10", it should show all these products b8f b12r a12 ps10.

The problem I ran into is the only filtering / showing selectors with one class name, not multiple. I understand that it is because of $ (this) in var = filter, but when even when I enter the class names manually, it does not show.

Script

 $('#products ul li').hide();
 $('#outlet li').click(function(e){
      e.preventDefault();
      var filter = $(this).attr('class');
      $('#products ul li').show();
      $('#products ul li:not(.' + filter + ')').hide();

Selector

<ul id="outlet">
     <li class="c2">2</li>
     <li class="d145">7</li>
     <li class="b8f b12r a12 ps10">8</li>
</ul>

Products

 <ul id="products">
      <li class="c2"><img src="images/c2.png">c2</li>
      <li class="d145"><img src="images/d145.png">d145</li>
      <li class="b8f"><img src="images/b8f.png">b8f</li>
      <li class="b12r"><img src="images/b12r.png">b12r</li>
      <li class="a12"><img src="images/a12.png">a12</li>
      <li class="ps10"><img src="images/ps10.png">ps10</li>
 </ul>

Answer 1

try something like this:

$('#outlet li').click(function(e){
    e.preventDefault();
    $('#products ul li').hide();
    var classes = $(this).attr('class').split(' '); // create an array of class names
    $.each(classes, function() { // iterate over array 
        $('#products ul li.' + this).show();
    });
});

Answer 2

:

$('#products ul li').show();
$('#products ul li').not('.' + $(this).attr('class').split(' ').join(', .')).hide();

not, . , not :

$('#products ul li').not('.c2, .d145, .a12').hide();

, #products ul li, ul, #products, #products li.