title: jquery: hide/show based on variable for class name
body: <p>I am pretty new to jQuery and need some help with filtering classes. The user can choose from nine buttons to select which event types to show/hide. Click a color and only events with that color show and the rest are hidden. Click "all" and all events show with none hidden. All events start out with <code>display:block</code>.</p>
  
  <p>Example control buttons:</p>
  
  <pre><code>&lt;li class="all" id="all-events"&gt;&lt;a href="#" onclick="showEvents('event-all')"&gt;
  &lt;img src="swatch-all.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="red" id="red-events"&gt;&lt;a href="#" onclick="showEvents('event-red')"&gt;
  &lt;img src="swatch-red.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  
  &lt;li class="blue" id="blue-events"&gt;&lt;a href="#" onclick="showEvents('event-blue')"&gt;
  &lt;img src="swatch-blue.png" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>The events are pulled from a database by php and look like this example:</p>
  
  <pre><code>&lt;div id="bigCal"&gt;
      &lt;p class="all"&gt;&lt;a href="http://foo.com" title="All event"&gt;All events&lt;/a&gt;&lt;/p&gt;
      &lt;p class="blue"&gt;&lt;a href="http://bar.com" title="Blue event"&gt;Blue event&lt;/a&gt;&lt;/p&gt;
      &lt;p class="red"&gt;&lt;a href="http://foobar.com" title="Red event"&gt;Red event&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've been working on the jQuery for two days! Not sure whether to use <code>.filter</code> or <code>.hasClass</code> or <code>.is</code>. None of it works. The simplest I tried was:</p>
  
  <pre><code>function showEvents(color) {
      ($('p').hasClass(color)) ? this.style.display="block" : this.style.display="none";
  }
  </code></pre>
  
  <p>Another attempt that did nothing was</p>
  
  <pre><code>function showEvents(color){
      $("p[className*='event-']").css('display', 'none');
      $("p[className=color]").css('display', 'block');
      if ($("p[className='event-all']")) 
          $("p[className*='event-']").css('display', 'block');
  }
  </code></pre>
  
  <p>Any help will be appreciated!</p>