Js: variable gets overwritten on click
<p>I'm stumped by this one, maybe you can help me out.</p>

<p>This is my html:</p>

<pre><code>&lt;ul class="wpsc_product_list_categories wpsc_product_list_categories_js"&gt;
&lt;li&gt;&lt;a href="#" id="products_all"&gt;All products&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="wpsc_category_link "&gt;&lt;span class="product_category_15"&gt;cat 1&lt;/span&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href="#" class="wpsc_category_link "&gt;&lt;span class="product_category_12"&gt;cat 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>And here's my js:</p>

<pre><code>jQuery(".wpsc_product_list_categories_js a").click( function() {    
    jQuery('.wpsc_product_list_categories a').removeClass('wpsc-current-cat');  
    jQuery(this).addClass('wpsc-current-cat');

    var className = jQuery(this).children().attr('class');

    jQuery('.products_list_product').fadeOut(300, function() { 
        jQuery('.products_list_product').removeClass('product_item_last');
        i = 2
        jQuery('.' + className).each(function(j){
            i = i + 1;
            if (i == 3) {
                jQuery(this).addClass('product_item_last'); 
                i = 0;
            }
        });
    });
    alert(className);
    jQuery('.' + className).fadeIn(300);
    return false;
});
</code></pre>

<p>The idea is when you click one of the links, the class of the span is stored in the variable 'className'. When you click it once, it works fine. When you click it a second time, the variable has suddenly changed to 'the_original_class_name' AND 'product_item_last'. This shouldn't happen, but I can't figure out why.</p>

<p>Does anybody have any idea?</p>
