JQuery - 具有多个按键场景的Click事件(棘手)

时间:2012-04-23 09:31:01

标签: jquery

我有一份跨度列表。所有都有类预加载器。除了该类之外,span还可以具有活动或非活动类。默认情况下,设置为inactive。基本上活动意味着黑色字体颜色和活动橙色字体颜色。点击,我有2个场景。在单击时,所有跨度都设置为非活动状态,单击的跨度将处于活动状态。单击并按下alt键,将仅从单击的跨度中删除非活动类,并将活动的类添加到其中。这工作正常。我想知道的是添加一个新场景,如下所示:在单击+ alt + cmd(mac os)上,我想将活动类添加到具有类活动的最后一个单击跨度之间的所有跨度,以及目前点击的跨度。希望我很清楚。提前感谢您的回复。干杯。马克

http://jsfiddle.net/E2nM4/

我的HTML:

<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>
<span class="pre-loader inactive">item</span>

我的css:

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

我的js:

$(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");​

1 个答案:

答案 0 :(得分:0)

我设法找到解决方案。感兴趣的人请查看下面的链接。

http://jsfiddle.net/xqNT8/6/