スパンのリストがあります。すべてにクラスのプリローダーがあります。そのクラスに加えて、スパンはクラスをアクティブまたは非アクティブにすることができます。デフォルトでは非アクティブが設定されています。基本的にアクティブとは、黒のフォント色、アクティブなオレンジ色のフォント色を意味します。クリックすると、2 つのシナリオがあります。クリックするだけで、すべてのスパンが非アクティブに設定され、クリックされたスパンがアクティブに設定されます。Alt キーを押しながらクリックすると、非アクティブなクラスがクリックされたスパンからのみ削除され、アクティブなクラスが追加されます。これはうまくいっています。私が知りたいのは、次のように新しいシナリオを追加することです: クリック + alt + cmd (mac os) で、最後にクリックされたクラスがアクティブなスパンと、現在クリックされているスパン。私がはっきりしていることを願っています。返信ありがとうございます。乾杯。マルク
私の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");