以下の連続するhogeのグループが30個あります。
lang
1<div class="hoge"> 2<ul> 3<li></li> 4<li></li> 5<li></li> 6</ul> 7</div>
この中のliが選択されるとそのliにactive、hogeにselectedというクラスが付与されます。
※liが選択できるのは1つのみ。同じliが再度クリックされると選択解除扱いでクラスも解除。別のliが選択されるとliのクラスは新しい方に付与されるが、selectedはそのまま
lang
1<div class="hoge selected"> 2<ul> 3<li class="active"></li> 4<li></li> 5<li></li> 6</ul> 7</div>
jqueryでこの動的に切り替わるクラス数を判別し、クラス数に応じて別要素.alert1、.alert2、.alert3、.alert4の表示・非表示切り替えを行いたいです。
具体的には、selectedが
▼0の時
.alert1のみ表示
▼1〜14の時
.alert2のみ表示
▼15〜29の時
.alert3のみ表示
▼30の時
.alert4のみ表示
としたいです。
以下の通り、読み込み時の数判別の記述は試したのですが、
リアルタイムで数が変わる処理が分かりません。
lang
1$(function(){ 2 var num = $('.selected').length; 3 if(num==0){ 4 $('.alert1').css('display','block'); 5 $('.alert2,.alert3,.alert4').css('display','none'); 6 } else if (14 >= num >= 1) { 7 $('.alert2').css('display','block'); 8 $('.alert1,.alert3,.alert4').css('display','none'); 9 } else if (29 >= num >= 15) { 10 $('.alert3').css('display','block'); 11 $('.alert1,.alert2,.alert4').css('display','none'); 12 } else { 13 $('.alert4').css('display','block'); 14 $('.alert1,.alert2,.alert3').css('display','none'); 15 } 16});
ご教授のほどよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー