ラジオボタンに応じてクラスを切り替える方法

Question

###■やりたいこと
ラジオボタンに応じてクラスを切り替える方法を模索しています。

「ピカ」と「ふわ」のラジオボタンがあり

★「ピカ」を選択して「実行」する場合
→「１回目」がピカっと表示された後に、「２回目」がずっと表示される。

★「ふわ」を選択して「実行」する場合
→「１回目」がふわっと表示された後に、「２回目」がずっと表示される。

という切り替えのためのクラス変更です。

###■ダメだったコード
次のように書いてみたのですけれど、クラス変更がうまくいきません。

<!--ラジオボタン-->	
<li class="selectterm" data-label="HuwaPika">
  <div class="label">
  <label for="selectterm">ピカふわ選択</label>
  </div>
  <div class="fields" data-required="no" data-type="radio">
  <label class="radio-block">
  <input name="selectterm" class="" value="pika1" type="radio" checked="checked" >ピカ
  </label>
  <label class="radio-block">
  <input name="selectterm" class="" value="huwa1" type="radio">ふわ
  </label>
  </div>
</li>

<!--ふんわり-->	
<div class="osu">実行</div>
  <div class="changeterm pika1">
  <p>１回目</p>
  </div>
  <div class="changeterm pika2">
  <p>２回目</p>
</div>

  $('.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());    
  });

上のコードの動きはこちら☟です。
https://jsfiddle.net/8Lxdywhb/1/

ご覧のように、ラジオボタンを「ふわ」に切り替えたときに、「pika2」が「huwa2」にならず、なぜか「pika1」になってしまうのです。

どうにかして、上のやりたいことが達成できるようにご指摘頂けませんでしょうか？

宜しくお願い致します。

Answer 1

そりゃ、同じ要素に対して、同じ名前のイベント追加すればそうなりますよ。
ラジオボタンをクリックした時に、その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);
  }


});

Comments

[退会済みユーザー]

ありがとうございます!!

ただ、残念ながら、どうやら思っているのと違うようです。って、質問が分かりにくいですよね。

「ふわ」を選択している状態では、「huwa1とhuwa2」の組み合わせになってほしい。

そして、「ピカ」を選択している状態では、「pika1とpika2」の組み合わせになってほしい。

と、いう感じです。

[miyabi_pudding]

なるほど、
ご期待に沿うような形に修正できたと思います。
試して観てください。

[miyabi_pudding]

pika1の時は、実行すると、
pika1表示、消えた後にpika2がずっと表示。
huwaに切り替えて、実行時に、
huwaでpikaと同じ動作をする、でよろしいでしょうか？
そのように動くよう修正できたと思いますので、試して観てください。

[退会済みユーザー]

ご連絡おそくなってしまって申し訳ございません。さきほど試させて頂き、でもちょっと上手くいかず、ひとまず後回しにしてmiyabi-sunさんの方を試しておりました。。

しかも、ひどいことに、、

どうやら上手くいかずの原因は、私が勝手に変なところを変えていたせいのようでした。。

今確認しましたところmiyabi_takatsukさんのご回答でも正しく動きました！！

何度もご丁寧に対応頂き、誠にありがとうございます。m(_ _)m

[退会済みユーザー]

こんばんは。たびたびすみません。実は、、
3つ目の追加で悩んでおります。
https://jsfiddle.net/8Lxdywhb/4/

「じと」（1回目だけがずっと表示され、２回目は表示されない）というやつがもう一人いまして、これは追加だけなのだから簡単だろう、と思っておりましたら、サッパリうまくいかず、どうかもう一度ご教示頂くわけにはいきませんでしょうか…？

[miyabi_pudding]

じとの処理を追加しました。
三つ以上になると、if構文だと難しくなってしまうので、
switch構文に切り替えています。

一つの処理を追加するだけでも、連動して、処理の仕方を変えなければいけない場合があります。
特に今回の場合は、最初は二つの条件だけだったので、
三項演算子（変数を定義する際、if文を一行で簡略して書くやり方です。条件式 ? trueの時 : falseの時　ってやつです）というものを使わせていただきましたが、
三つ以上の条件となると、三項演算子は使うべきではなく、
（というか、変数定義以外にもいろいろやる場合は、三項演算子は使うべきじゃない）
switchを使ったほうが、いいやり方になってきます。

[退会済みユーザー]

そうなのですね。ifを書くとjsfiddleが「おかしいぞ」と丸ポチで指摘してくれるのですけれど、何が？とまったくわけが分からなかったです。ひとまず２つに要件を変更して作っていたので、本当に助かります。ジト、どうもありがとうございます！本日はカラっとした良い朝ですね！

[退会済みユーザー]

ところで、これはあくまで、ところで、、なのですけれども、、

なぜチェックボックスだと出来なくなってしまうのでしょうか？
https://jsfiddle.net/rr9w8297/

ラジオでの三択でなく、チェックのon off二択による、チカフワ切り替えです。

それらしいところをラジオからチェックにしただけではダメで、クラスを切り替える複雑なところも変えないといけないのでしょうか？

[miyabi_pudding]

そうですね。
ラジオボタンだと、inputのvalue値が必ず一つとなりますが、
チェックボックスだと、複数選択が可能で、
value値が配列となるので、処理がけっこう変わってしまいます。

もし、解決必要なら新たに質問を立ててはいかがでしょうか。

[退会済みユーザー]

ありがとうございます！

>inputのvalue値が必ず一つとなりますが、
チェックボックスだと、複数選択が可能で

なるほど~、仕組みきちんと理解されていると、できるかどうかがすぐにわかるものですね。

どうもありがとうございます。そうですね。全く別質問なので、少し調べてみてから後で立てるかもしれません。

Answer 2

JSの書き方が駄目です！

$('.osu').on("click",function(){
 ...省略

$('.osu').on("click",function(){
 ...省略

上下のこれは同じものを指してますよね？
「実行ボタン」をクリックすると、両方共が実行されますよ！
下の.on('change'も同様ですね。

これに対抗する為にクラスを付与したり消したりしてるようですが、
この使い方だとかなり混乱するはずです。
JS世界で変数を定義してしまうのが簡単なやり方でしょう。

$(function(){
  var target = "pika";

  $('input[name=selectterm]').on('change', function() {
    target = $(this).val();
  });

  $('.osu').on("click",function(){
    if (target === "pika") {
      $('.pika1').fadeIn(100).delay(100).fadeOut(100);
      $('.pika2').delay(300).fadeIn(100);
    } else {
      $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000);
      $('.huwa2').delay(3000).fadeIn(1000);
    }
  });
});

こんな感じですかね。
HTMLのラジオボタンの値をpikaとhuwaにしないと動作しなさそうですが、
調整して試してみてください。

---

【コメント対応版】

表示状態の「2回目」が表示されっぱなしになって邪魔で困ってるんですよね？
実行開始と同時に消してみてはどうでしょうか？

$(function(){
  var target = "pika";

  $('input[name=selectterm]').on('change', function() {
    target = $(this).val();
  });

  $('.osu').on("click",function(){
    $('.pika2').add('.huwa2').fadeOut(0);
    if (target === "pika") {
      $('.pika1').fadeIn(100).delay(100).fadeOut(100);
      $('.pika2').delay(300).fadeIn(100);
    } else {
      $('.huwa1').fadeIn(1000).delay(1000).fadeOut(1000);
      $('.huwa2').delay(3000).fadeIn(1000);
    }
  });
});

Comments

[退会済みユーザー]

おお、ありがとうございます。かなり思っているのと近いです。
https://jsfiddle.net/8Lxdywhb/2/

せっかくなのですけれど、「ふわ」と「ピカ」を自由に何度でも行き来できるようにはできませんでしょうか……？

クラスを付与したり消したりで、そんなふうに自由にポチポチ行き来できる機能を頑張ろうとしたのですが、うまくいかず、そろそろ泣きそうなのです。笑

[miyabi-sun]

> 自由に行き来できる
ん？もう少し具体的に頼みます。

私が実装からこうかもしれないと考えた内容としては、こんな感じですか？
・ピカピカは0.1秒の点滅、ふわふわは1秒の点滅
・今はfadeOutで勝手に終わってるけど、本来は実行押したらずっとピカピカorふわふわしてほしい
・そしてピカピカ実行している途中にラジオボタンでふわふわを選択すると、ピカピカしているのが即時ふわふわに切り替わってほしい

[退会済みユーザー]

たびたび不明瞭な表現で申し訳ございません。。

■「ふわ」を選択したら、ふわバージョンに。
→実行を押すと「１回目」がふわっと表示される。
その後に「２回目」がふわっと表示されてそのままずっと残る。

■「ピカ」を選択したら、ピカバージョンに。
→実行を押すと「１回目」がピカっと表示される。その後に「２回目」がピカっと表示されてそのままずっと残る。

という、このふわバージョンとピカバージョンを、何度も選択したり戻したりできる。実行を押して、何度も確認できる。

そんな状態を目指して、お昼ご飯ナシで頑張っております。笑

[miyabi-sun]

足りないのは初期化処理ですね。
実行開始時のあるべき状態にする→実行→実行終了時のあるべき状態にする

これが重要です。
編集しましたので実行してみてください。

[退会済みユーザー]

たびたびのご返信、誠にありがとうございます。
初期化ですね。うぅぅうん、、難しいです。

今回のご対応版、ほぼ、もうほぼほぼできています。。
https://jsfiddle.net/8Lxdywhb/3/

「ピカ→ふわ」のときの切り替えは何度でも出来て、まさに理想通りです。ただ、

「ふわ→ピカ」のときだけ、なぜか「ふわのまま」のようなのですが、、何かさじ加減ございませんでしょうか？（ほんっとすみません。）

[miyabi-sun]

<input name="selectterm" class="" value="pika1" type="radio" checked="checked" >ピカ
<input name="selectterm" class="" value="huwa1" type="radio">ふわ
質問文にあるようにHTMLを修正してください、
このvalueの値「pika1」と「huwa1」を。。。

<input name="selectterm" class="" value="pika" type="radio" checked="checked" >ピカ
<input name="selectterm" class="" value="huwa" type="radio">ふわ
このように修正すればふわ→ピカが正常動作するはずです。

[miyabi-sun]

ただ、ふわの発生が遅すぎて、
2回目がフェードインし始めている最中にピカに切り替えて実行すると変な挙動になりますね。
これはCSSアニメーションを利用してクラスを付け外しした方が良いかもしれません。

[退会済みユーザー]

たいっへん申し訳ございません”！”！
何を思って変えたのやら、、まったく理解できません。笑
これならば！おかげさまで無事本番に実装できそうです。
このたびは御昼時に誠にありがとうございます。。
「おしえて」「おしえて」と、なんども失礼致しました。

[退会済みユーザー]

あ、それは確認しておりませんでした。わざわざご報告痛み入ります。けれど、そんなに頻繁に変更することはなさそうなので、ひとまず十分でございます。嬉しいよぅーーー……