###■やりたいこと
ラジオボタンに応じてクラスを切り替える方法を模索しています。
「ピカ」と「ふわ」のラジオボタンがあり
★「ピカ」を選択して「実行」する場合
→「1回目」がピカっと表示された後に、「2回目」がずっと表示される。
★「ふわ」を選択して「実行」する場合
→「1回目」がふわっと表示された後に、「2回目」がずっと表示される。
という切り替えのためのクラス変更です。
###■ダメだったコード
次のように書いてみたのですけれど、クラス変更がうまくいきません。
html
1<!--ラジオボタン--> 2<li class="selectterm" data-label="HuwaPika"> 3 <div class="label"> 4 <label for="selectterm">ピカふわ選択</label> 5 </div> 6 <div class="fields" data-required="no" data-type="radio"> 7 <label class="radio-block"> 8 <input name="selectterm" class="" value="pika1" type="radio" checked="checked" >ピカ 9 </label> 10 <label class="radio-block"> 11 <input name="selectterm" class="" value="huwa1" type="radio">ふわ 12 </label> 13 </div> 14</li> 15 16<!--ふんわり--> 17<div class="osu">実行</div> 18 <div class="changeterm pika1"> 19 <p>1回目</p> 20 </div> 21 <div class="changeterm pika2"> 22 <p>2回目</p> 23</div>
javascript
1 2 $('.osu').on("click",function(){ 3 $('.pika1').fadeIn(100).delay(100).fadeOut(100); 4 $('.pika2').delay(300).fadeIn(100); 5 }); 6 7 $('.osu').on("click",function(){ 8 $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000); 9 $('.huwa2').delay(3000).fadeIn(1000); 10 }); 11 12$('input[name=selectterm]').on('change', function() { 13 $('.changeterm').removeClass('pika1 huwa1').addClass($(this).val()); 14 }); 15 16$('input[name=selectterm]').on('change', function() { 17 $('.changeterm').removeClass('pika2 huwa2').addClass($(this).val()); 18 }); 19 20 21
上のコードの動きはこちら☟です。
https://jsfiddle.net/8Lxdywhb/1/
ご覧のように、ラジオボタンを「ふわ」に切り替えたときに、「pika2」が「huwa2」にならず、なぜか「pika1」になってしまうのです。
どうにかして、上のやりたいことが達成できるようにご指摘頂けませんでしょうか?
宜しくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/06 03:19
2018/02/06 03:31
2018/02/06 04:20
退会済みユーザー
2018/02/06 04:37
退会済みユーザー
2018/02/06 10:46
2018/02/07 00:57 編集
退会済みユーザー
2018/02/07 01:10
退会済みユーザー
2018/02/07 15:58 編集
2018/02/08 00:44
退会済みユーザー
2018/02/08 07:19