特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。
一応動くのですが、見ての通り頭悪い書き方になってしまいました。
さらに出来れば、「show('slow')」の左上からニョキニョキ出るアニメーションではなく、slideToggleの様なフェードかかった上から現れるようなアニメーションにしたいのですが、お知恵をお貸しください。
一応動いてるので（動きはアレですが）、のんびりご回答をお待ちしております。
（WordpressのContactForm7のため、HTMLは汚くなっています。ご了承ください。）
$("input[name='radio-320']").change(function() {
var radioJoin = $("input[name='radio-320']:checked").val() == "出席";
var radioNotjoin = $("input[name='radio-320']:checked").val() == "欠席";
if (radioJoin) {
$(".with-option.parent01").show('slow');
} else if (radioNotjoin) {
$(".with-option.parent01").hide('slow');
}
});
$("input[name='radio-321']").change(function() {
var radioJoin = $("input[name='radio-321']:checked").val() == "出席";
var radioNotjoin = $("input[name='radio-321']:checked").val() == "欠席";
if (radioJoin) {
$(".with-option.parent02").show('slow');
} else if (radioNotjoin) {
$(".with-option.parent02").hide('slow');
}
});<dd>
<span class="wpcf7-form-control-wrap radio-320">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="radio-320" value="出席"> <span class="wpcf7-list-item-label">出席</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="radio-320" value="欠席"> <span class="wpcf7-list-item-label">欠席</span>
</label>
</span>
</span>
</span><p></p>
<div class="with-option parent01">
<div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
<p><span class="wpcf7-form-control-wrap text-567">
<input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人"></span>
</p>
</div>
</dd>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+3
いっそのことアニメーションはCSSに任せてしまう案。
var pair = { 'radio-320': [ '出席', 'parent01' ], 'radio-321': [ '出席', 'parent02' ] };
$( function() {
$( 'input[name^="radio-"]' ).change( function() {
var _$ = $( this ), _n = _$.attr( 'name' );
if ( !pair[ _n ] ) { return; }
$( '.with-option.' + pair[ _n ][ 1 ] )[ ( _$.val() !== pair[ _n ][ 0 ] ) ? 'addClass' : 'removeClass' ]( 'close-option' );
} );
} );.close-option {
opacity: 0;
}
.with-option {
transition: all 1s ease 0s;
}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
$("input[name='radio-320']").change(function(){
if($(this).val()=="出席"){
こんな風に書けちゃいますよ
easingを使えば色々アニメーションしますよ
var EASING=["easeOutElastic","easeInOutQuint",
"easeInOutSine","easeInOutBack","easeOutExpo",
"easeOutCirc","easeInOutCirc","easeOutBounce"];
$(function(){
$("input[name='radio-320']").change(function(){
if($(this).val()=="出席"){
$(".with-option.parent01").show(500,EASING[Math.floor(Math.random()*EASING.length)]);
}else{
$(".with-option.parent01").hide(500,EASING[Math.floor(Math.random()*EASING.length)]);
}
});
})投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
function slideToggle(radioName, slideClass) {
var radio = "input[name='" + radioName + "']";
var effective = $(radio).first().val();
$(radio).change(function() {
($(this).val() === effective)
? $(slideClass).slideDown()
: $(slideClass).slideUp();
})
.trigger('change');
}
slideToggle('radio-320', '.parent01');
slideToggle('radio-321', '.parent02');「項目1つ目を選択で表示」で決めうちです。変更ありなら引数を追加で。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
相対位置を指定する
相対的な位置を指定すれば .parent01, .parent02 の名前にとらわれる事から解放されると思います。
jQuery で表示/非表示を制御するなら次のように。
<dl id="sample">
<dd>
<span class="wpcf7-form-control-wrap radio-320">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="radio-320" value="出席"> <span class="wpcf7-list-item-label">出席</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="radio-320" value="欠席"> <span class="wpcf7-list-item-label">欠席</span>
</label>
</span>
</span>
</span>
<p></p>
<div class="with-option parent01">
<div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
<p>
<span class="wpcf7-form-control-wrap text-567">
<input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
</span>
</p>
</div>
</dd>
<dd>
<span class="wpcf7-form-control-wrap radio-320">
<span class="wpcf7-form-control wpcf7-radio">
<span class="wpcf7-list-item first">
<label>
<input type="radio" name="radio-320" value="出席"> <span class="wpcf7-list-item-label">出席</span>
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<input type="radio" name="radio-320" value="欠席"> <span class="wpcf7-list-item-label">欠席</span>
</label>
</span>
</span>
</span>
<p></p>
<div class="with-option parent02">
<div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
<p>
<span class="wpcf7-form-control-wrap text-567">
<input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
</span>
</p>
</div>
</dd>
</dl>
<script>
'use strict';
jQuery('#sample').on('change', '.wpcf7-form-control-wrap.radio-320', function (event) {
var input = event.target, div;
if (!jQuery(input).is('input[name="radio-320"]')) {
return;
}
div = jQuery(event.currentTarget).nextAll('.with-option');
switch (input.value) {
case '出席':
div.show('slow');
break;
case '欠席':
div.hide('slow');
break;
}
});
</script>CSS Transitions
CSS Transitions で表示制御するのが最良ですが、height: auto; を transition の対象に指定できないようです。
JavaScript で element.clientHeight を style 属性に埋め込むことで解決できます。
- auto height な CSS Transitions | Unformed Building
- css3 - How can I transition height: 0; to height: auto; using CSS? - Stack Overflow
Re: cotton88 さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
$("input[name='radio-320']").change(function() {
var radioJoin = $(this);
var op = $(".with-option.parent01");
(radioJoin.val() === "出席") ? op.addClass("show") : op.removeClass("show");
});.with-option.parent01{
transition: 1s ease;
opacity: 0;
visibility: hidden;
/*width: 0;*/
height: 0;
transform: translateX(-200%);
}
.with-option.parent01.show {
opacity: 1;
visibility: visible;
/*width: 100%;*/
height: 100%;
transform: translateX(0);
}cssに動きは入れたので、ここらは好きにデザインできます。addClass等をfadeとかに変えてもいけるかと。jQuery3.0とかだと問題ないと思いますがアレかもしれないのでclassを入れるのが良かろうと思います。
keyframesでアニメーションを入れたりとかいろいろできます。
jsFiddleでのサンプル(transform)&スライドイン(横)
jsFiddleでのサンプル(スライドイン・アウト)
jsFiddleでのサンプル(transform)&スライドイン(縦)
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
