title: Most efficient way of show/hide elements with multiple conditions
body: <p>I'm trying to optimize my existing products loading time. I have a big list of products to be displayed/hide based on the conditions selected by the user. To simply, I just pick 3 conditions which are product name, size and color.</p>
  
  <p>For example, products are shown based on the dropdown conditions by the user. Referring to the HTML below, if product name is A, column pa, pa1 and pa2 is shown. If additional condition size is 2, then column pa2 and column pa2r are shown. If color is included, only column pa2r is shown. All other products are hidden.</p>
  
  <p>The HTML is like this</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;Products&lt;/td&gt;
  &lt;td class="pa"&gt;Product A&lt;/td&gt;
  &lt;td class="pa1"&gt;Product A1&lt;/td&gt;
  &lt;td class="pa2"&gt;Product A2&lt;/td&gt;
  &lt;td class="pa2r"&gt;Product A2r&lt;/td&gt;
  &lt;td class="pb"&gt;Product B&lt;/td&gt;
  &lt;td class="pc"&gt;Product C&lt;/td&gt;
  &lt;td class="pc1"&gt;Product C1&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Currently my java script has a big switch filtering product names, and multiple if else conditions to check the color and size. Some conditions might override the existing switch for product names, which causing columns to hide at first, then showed during the switch(product names) statement, and hide again in the inner IF ELSE statement. More conditions will be introduced and will complicate the codes, I tested on IE7 is really slow due to the hide/show and toggles.</p>
  
  <p>A few solutions I've found online which could reduce the load including replace show/hide with css({'display':'none'}) or css({'display':'block'}), basically is to optimize the selector which I think is not good enough.</p>
  
  <p>Is there any other good solutions to handle multiple conditions in jQuery?</p>