質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.49%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 2,807
退会済みユーザー

退会済みユーザー

■やりたいこと

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

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

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

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

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

■ダメだったコード

次のように書いてみたのですけれど、クラス変更がうまくいきません。

<!--ラジオボタン-->    
<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>1回目</p>
  </div>
  <div class="changeterm pika2">
  <p>2回目</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」になってしまうのです。

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

宜しくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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


});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/08 00:57 編集

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

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

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

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

    キャンセル

  • 2018/02/08 09:44

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

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

    キャンセル

  • 2018/02/08 16:19

    ありがとうございます!

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

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

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

    キャンセル

+1

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のラジオボタンの値をpikahuwaにしないと動作しなさそうですが、
調整して試してみてください。


【コメント対応版】

表示状態の「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);
    }
  });
});

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/02/06 13:27

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

    キャンセル

  • 2018/02/06 13:30

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

    キャンセル

  • 2018/02/06 13:32

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る