JQuery - Click event with multiple key press scenario (tricky)
<p>I have a list of spans. All have the class pre-loader. In addition to that class, a span can have either the class active or inactive. By default inactive is set. Basically active means black font color, and active orange font color. On click, I have 2 scenarios. On simple click, all spans are set to inactive and the clicked one to active. On click with alt pressed, the class inactive is removed from the clicked span only, and the class active added to it. This is working fine. What I would like know is to add a new scenario as follows: On click + alt + cmd (mac os), I would like to add the class active to all the spans between the last clicked span that has the class active, and the currently clicked span. Hope i am clear. Thank you in advance for your replies. Cheers. Marc</p>

<p><a href="http://jsfiddle.net/E2nM4/" rel="nofollow">http://jsfiddle.net/E2nM4/</a></p>

<p>My html:</p>

<pre><code>&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
&lt;span class="pre-loader inactive"&gt;item&lt;/span&gt;
</code></pre>

<p>My css:</p>

<pre><code>span{margin-left:15px;}
.pre-loader.inactive{color:black;}
.pre-loader.active{color:orange;}
</code></pre>

<p>My js:</p>

<pre><code>$(document).on({
    click: function(e) {

        if (e.altKey) {
            $(this).removeClass('inactive').addClass('active');
        }
        else {
            $('.pre-loader').removeClass('active').addClass('inactive');
            $(this).addClass('active');
        }

    }
}, ".pre-loader");​
</code></pre>
