title: Show/hide items with class based on list items: onclick, click() not working?
body: <p>I've got a client Wordpress site where the client has a bunch of short posts sorted into different categories. These are all displayed on the main blog page. Rather than using Wordpress's built-in functionality to take the user to a new category page when the user clicks on a category name, I'd like to show/hide the relevant posts while remaining on the page. Their category names are applied to the posts as classes.</p>
  
  <p>The actual hiding/showing mechanism will be easy to do once I'm able to grab the category that the user has clicked on, but that's the bit I'm having difficulty with. Wordpress can generate the list of categories (either linked or not), but adding <strong>onclick</strong> to each list item...</p>
  
  <pre><code>&lt;li onclick="catSort(this)"&gt;Category&lt;/li&gt;
  function catSort(obj) { var singleCat = obj.innerHTML; ... }
  </code></pre>
  
  <p>(note that this doesn't work even without the <code>this</code> keyword, eg. if I just try to call an alert)</p>
  
  <p>...iterating the categories and scripting a <strong>click()</strong> function...</p>
  
  <pre><code>var catArray = $('.vendor_categories').find('a');`
  for (i = 0; i &lt; catArray.length; i++) {
    catArray[i].click( function () { var singleCat = catArray[i].innerHTML; ... });
  }
  </code></pre>
  
  <p>...adding an <strong>onclick</strong> using JS and a DOM query...</p>
  
  <pre><code>$('.vendor_categories li').onclick = catSort();
  </code></pre>
  
  <p>...these don't work, nor do some other solutions I've tried.</p>
  
  <p>Using the array structure, I've been able to get <em>all</em> category names or <em>arbitrary</em> category names and mess around with them (hide ALL the posts!), but I haven't been able to get <em>the one clicked on by the user</em>, and I do not know why. Am I missing something obvious? Why can't I get it to recognize a user's click?</p>