質問: ### ■やりたいこと ラジオボタンに応じてクラスを切り替える方法を模索しています。 「ピカ」と「ふわ」のラジオボタンがあり **★「ピカ」を選択して「実行」する場合** →「1回目」がピカっと表示された後に、「2回目」がずっと表示される。 **★「ふわ」を選択して「実行」する場合** →「1回目」がふわっと表示された後に、「2回目」がずっと表示される。 という切り替えのためのクラス変更です。 ### ■ダメだったコード 次のように書いてみたのですけれど、クラス変更がうまくいきません。 ``` ピカふわ選択 ピカ ふわ 実行 1回目 2回目 ``` ``` $('.osu').on("click",function(){ $('.pika1').fadeIn(100).delay(100).fadeOut(100); $('.pika2').delay(300).fadeIn(100); }); $('.osu').on("click",function(){ $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000); $('.huwa2').delay(3000).fadeIn(1000); }); $('input[name=selectterm]').on('change', function() { $('.changeterm').removeClass('pika1 huwa1').addClass($(this).val()); }); $('input[name=selectterm]').on('change', function() { $('.changeterm').removeClass('pika2 huwa2').addClass($(this).val()); }); ``` 上のコードの動きはこちら☟です。 ご覧のように、ラジオボタンを「ふわ」に切り替えたときに、「pika2」が「huwa2」にならず、なぜか「pika1」になってしまうのです。 どうにかして、上のやりたいことが達成できるようにご指摘頂けませんでしょうか? 宜しくお願い致します。
回答: そりゃ、同じ要素に対して、同じ名前のイベント追加すればそうなりますよ。 ラジオボタンをクリックした時に、そのvalue値を取ってきて、 付与するchangeイベントは一個にし、 それに応じて消すクラスを決めればいいんです。 以下でいかがでしょうか? ``` $('.osu').on("click",function(){ $('.changeterm').hide(); $('.pika1').fadeIn(100).delay(100).fadeOut(100); $('.pika2').delay(300).fadeIn(100); $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000); $('.huwa2').delay(3000).fadeIn(1000); $('.jito').fadeIn(1000).delay(1000); }); $('input[name=selectterm]').on('change', function() { //var targetClass = $(this).val() == "pika1" ? 'pika2' : 'huwa2'; //var removeClass = $(this).val() == "pika1" ? 'huwa1 huwa2' : 'pika1 pika2'; //var addClass = $(this).val() == "pika1" ? 'pika2' : 'huwa2'; // 先に追加する、消すクラス文字列を入れる変数を定義 var removeClass, addClass; // switch構文で、条件に合った処理を行う switch ($(this).val()) { case "pika1": removeClass = 'huwa1 huwa2 jito'; addClass = 'pika2'; break; case "huwa1": removeClass = 'pika1 pika2 jito'; addClass = 'huwa2'; break; case "jito": removeClass = 'pika1 pika2 huwa1 huwa2'; // addClass = 'jito'; break; default: break; } // 共通の処理、1個目の処理を行う $('.changeterm').eq(0).removeClass(removeClass).addClass($(this).val()); // ここでは、共通の処理、クラスを消す、だけを行う $('.changeterm').eq(1).removeClass(removeClass); // クラスの追加は、jito以外で行うので、条件式で分ける if ($(this).val() != "jito") { $('.changeterm').eq(1).addClass(addClass); } }); ```