jQueryをもっとスマートにかけないでしょうか。

特定のラジオボタンにチェックをしたら他の項目を表示/非表示にするjQueryを書きました。

一応動くのですが、見ての通り頭悪い書き方になってしまいました。
さらに出来れば、「show('slow')」の左上からニョキニョキ出るアニメーションではなく、slideToggleの様なフェードかかった上から現れるようなアニメーションにしたいのですが、お知恵をお貸しください。

一応動いてるので（動きはアレですが）、のんびりご回答をお待ちしております。
（WordpressのContactForm7のため、HTMLは汚くなっています。ご了承ください。）

javascript
1$("input[name='radio-320']").change(function() {
2var radioJoin = $("input[name='radio-320']:checked").val() == "出席";
3var radioNotjoin = $("input[name='radio-320']:checked").val() == "欠席";
4  if (radioJoin) {
5    $(".with-option.parent01").show('slow');
6  } else if (radioNotjoin) {
7    $(".with-option.parent01").hide('slow');
8  }
9});
10$("input[name='radio-321']").change(function() {
11var radioJoin = $("input[name='radio-321']:checked").val() == "出席";
12var radioNotjoin = $("input[name='radio-321']:checked").val() == "欠席";
13  if (radioJoin) {
14    $(".with-option.parent02").show('slow');
15  } else if (radioNotjoin) {
16    $(".with-option.parent02").hide('slow');
17  }
18});

html
1<dd>
2	<span class="wpcf7-form-control-wrap radio-320">
3		<span class="wpcf7-form-control wpcf7-radio">
4			<span class="wpcf7-list-item first">
5				<label>
6				<input type="radio" name="radio-320" value="出席">&nbsp;<span class="wpcf7-list-item-label">出席</span>
7				</label>
8			</span>
9			<span class="wpcf7-list-item last">
10				<label>
11				<input type="radio" name="radio-320" value="欠席">&nbsp;<span class="wpcf7-list-item-label">欠席</span>
12				</label>
13			</span>
14		</span>
15	</span><p></p>
16	<div class="with-option parent01">
17		<div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
18		<p><span class="wpcf7-form-control-wrap text-567">
19		<input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人"></span>
20		</p>
21	</div>
22</dd>

行動規範の内容に同意します

回答5件

ベストアンサー

いっそのことアニメーションはCSSに任せてしまう案。

JavaScript
1var pair = { 'radio-320': [ '出席', 'parent01' ], 'radio-321': [ '出席', 'parent02' ] };
2$( function() {
3	$( 'input[name^="radio-"]' ).change( function() {
4		var _$ = $( this ), _n = _$.attr( 'name' );
5		if ( !pair[ _n ] ) { return; }
6		$( '.with-option.' + pair[ _n ][ 1 ] )[ ( _$.val() !== pair[ _n ][ 0 ] ) ? 'addClass' : 'removeClass' ]( 'close-option' );
7	} );
8} );

CSS
1.close-option {
2	opacity: 0;
3}
4.with-option {
5	transition: all 1s ease 0s;
6}
7```**動くサンプル：**[https://jsfiddle.net/2oLvujas/1/](https://jsfiddle.net/2oLvujas/1/)

投稿2016/06/04 17:39

kei344

総合スコア69407

jq
1$("input[name='radio-320']").change(function() {
2  var radioJoin = $(this);
3  var op = $(".with-option.parent01");
4  (radioJoin.val() === "出席") ? op.addClass("show") : op.removeClass("show");
5});

css
1.with-option.parent01{
2  transition: 1s ease;
3  opacity: 0;
4  visibility: hidden;
5  /*width: 0;*/
6  height: 0;
7  transform: translateX(-200%);
8}
9
10.with-option.parent01.show {
11  opacity: 1;
12  visibility: visible;
13  /*width: 100%;*/
14  height: 100%;
15  transform: translateX(0);
16}

cssに動きは入れたので、ここらは好きにデザインできます。addClass等をfadeとかに変えてもいけるかと。jQuery3.0とかだと問題ないと思いますがアレかもしれないのでclassを入れるのが良かろうと思います。
keyframesでアニメーションを入れたりとかいろいろできます。

jsFiddleでのサンプル(transform)&スライドイン(横)
jsFiddleでのサンプル(スライドイン・アウト)
jsFiddleでのサンプル(transform)&スライドイン(縦)

投稿2016/06/06 08:02

編集2016/06/07 17:36

hidekichi

総合スコア366

相対位置を指定する

相対的な位置を指定すれば .parent01, .parent02 の名前にとらわれる事から解放されると思います。
jQuery で表示/非表示を制御するなら次のように。

ラジオボタンにチェックをしたら他の項目を表示/非表示 - JSFiddle

HTML
1<dl id="sample">
2  <dd>
3    <span class="wpcf7-form-control-wrap radio-320">
4      <span class="wpcf7-form-control wpcf7-radio">
5        <span class="wpcf7-list-item first">
6          <label>
7            <input type="radio" name="radio-320" value="出席">&nbsp;<span class="wpcf7-list-item-label">出席</span>
8          </label>
9        </span>
10        <span class="wpcf7-list-item last">
11          <label>
12            <input type="radio" name="radio-320" value="欠席">&nbsp;<span class="wpcf7-list-item-label">欠席</span>
13          </label>
14        </span>
15      </span>
16    </span>
17    <p></p>
18    <div class="with-option parent01">
19      <div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
20      <p>
21        <span class="wpcf7-form-control-wrap text-567">
22          <input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
23        </span>
24      </p>
25    </div>
26  </dd>
27  <dd>
28    <span class="wpcf7-form-control-wrap radio-320">
29      <span class="wpcf7-form-control wpcf7-radio">
30        <span class="wpcf7-list-item first">
31          <label>
32            <input type="radio" name="radio-320" value="出席">&nbsp;<span class="wpcf7-list-item-label">出席</span>
33          </label>
34        </span>
35        <span class="wpcf7-list-item last">
36          <label>
37            <input type="radio" name="radio-320" value="欠席">&nbsp;<span class="wpcf7-list-item-label">欠席</span>
38          </label>
39        </span>
40      </span>
41    </span>
42    <p></p>
43    <div class="with-option parent02">
44      <div class="ttl">同席者がいる場合、年齢と人数を入力してください</div>
45      <p>
46        <span class="wpcf7-form-control-wrap text-567">
47          <input type="text" name="text-567" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="例) 4才と7才の2人">
48        </span>
49      </p>
50    </div>
51  </dd>
52</dl>
53
54<script>
55'use strict';
56jQuery('#sample').on('change', '.wpcf7-form-control-wrap.radio-320', function (event) {
57  var input = event.target, div;
58
59
60  if (!jQuery(input).is('input[name="radio-320"]')) {
61    return;
62  }
63
64  div = jQuery(event.currentTarget).nextAll('.with-option');
65
66  switch (input.value) {
67    case '出席':
68      div.show('slow');
69      break;
70    case '欠席':
71      div.hide('slow');
72      break;
73  }
74});
75</script>

CSS Transitions

CSS Transitions で表示制御するのが最良ですが、height: auto; を transition の対象に指定できないようです。
JavaScript で element.clientHeight を style 属性に埋め込むことで解決できます。

Re: cotton88 さん

投稿2016/06/06 02:19

think49

総合スコア18162

javascript
1function slideToggle(radioName, slideClass) {
2  var radio = "input[name='" + radioName + "']";
3  var effective = $(radio).first().val();
4
5  $(radio).change(function() {
6    ($(this).val() === effective)
7      ? $(slideClass).slideDown()
8      : $(slideClass).slideUp();
9  })
10  .trigger('change');
11}
12
13slideToggle('radio-320', '.parent01');
14slideToggle('radio-321', '.parent02');

「項目1つ目を選択で表示」で決めうちです。変更ありなら引数を追加で。

投稿2016/06/05 13:03

nnssn

総合スコア1221

javascript
1  $("input[name='radio-320']").change(function(){
2   if($(this).val()=="出席"){

こんな風に書けちゃいますよ

easingを使えば色々アニメーションしますよ

javascript
1var EASING=["easeOutElastic","easeInOutQuint",
2"easeInOutSine","easeInOutBack","easeOutExpo",
3"easeOutCirc","easeInOutCirc","easeOutBounce"];
4 $(function(){
5  $("input[name='radio-320']").change(function(){
6   if($(this).val()=="出席"){
7    $(".with-option.parent01").show(500,EASING[Math.floor(Math.random()*EASING.length)]);
8   }else{
9    $(".with-option.parent01").hide(500,EASING[Math.floor(Math.random()*EASING.length)]);
10   }
11  });
12 })