jQueryコードの簡素化

jQueryを使用した以下のコードがあります。
このコードのjavascriptの部分、簡素化してコードを短くする事って出来るのでしょうか？

このhtmlは3人分ですが、実際はもっとあるため、とてつもなくコードが長くなってしう為、
なるべく短くしたいと思っております。

もし出来るのであれば、ご教授して頂ければ幸いです。

html
1
2<!DOCTYPE html>
3<html>
4<head>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6</head>
7<body>
8<button id="button1">年齢</button>
9<button id="button2">出身地</button>
10<button id="button3">備考</button>
11
12<div>
13<span id="name_a">名前A：</span>
14<span id="age_a">年齢A</span>
15<span id="address_a" style="display:none;">出身地A</span>
16<span id="etc_a" style="display:none;">備考A</span>
17</div>
18
19<div>
20<span id="name_b">名前B：</span>
21<span id="age_b">年齢B</span>
22<span id="address_b" style="display:none;">出身地B</span>
23<span id="etc_b" style="display:none;">備考B</span>
24</div>
25
26<div>
27<span id="name_c">名前C：</span>
28<span id="age_c">年齢C</span>
29<span id="address_c" style="display:none;">出身地C</span>
30<span id="etc_c" style="display:none;">備考C</span>
31</div>
32
33<script>
34
35$(function(){
36	$('#button1').on('click', function(){
37		$('#age_a').css('display','inline');
38		$('#age_b').css('display','inline');
39		$('#age_c').css('display','inline');
40		$('#address_a').css('display','none');
41		$('#address_b').css('display','none');
42		$('#address_c').css('display','none');
43		$('#etc_a').css('display','none');
44		$('#etc_b').css('display','none');
45		$('#etc_c').css('display','none');
46	});
47});
48
49$(function(){
50	$('#button2').on('click', function(){
51		$('#age_a').css('display','none');
52		$('#age_b').css('display','none');
53		$('#age_c').css('display','none');
54		$('#address_a').css('display','inline');
55		$('#address_b').css('display','inline');
56		$('#address_c').css('display','inline');
57		$('#etc_a').css('display','none');
58		$('#etc_b').css('display','none');
59		$('#etc_c').css('display','none');
60	});
61});
62 
63$(function(){
64	$('#button3').on('click', function(){
65		$('#age_a').css('display','none');
66		$('#age_b').css('display','none');
67		$('#age_c').css('display','none');
68		$('#address_a').css('display','none');
69		$('#address_b').css('display','none');
70		$('#address_c').css('display','none');
71		$('#etc_a').css('display','inline');
72		$('#etc_b').css('display','inline');
73		$('#etc_c').css('display','inline');
74	});
75});
76 
77</script>
78 
79</body>
80</html>

m.ts10806

2018/04/21 19:10

個別に指定することがあるのかないのか　それぞれの利用の用途も明確に記述してください。個別の指定の記述がないのであれば既にでている回答の通りclassをあててそれに対して指定するだけで実現可能です。

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

回答2件

ベストアンサー

luckerさんの言う通り、classをしっかり使えば、かなり簡素化できますよ。

html
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5<style type="text/css">
6
7.ageView > .addressSpan,
8.ageView > .etcSpan,
9.addressView > .ageSpan,
10.addressView > .etcSpan,
11.etcView > .ageSpan,
12.etcView > .adressSpan {
13  display: none;
14}
15
16
17</style>
18</head>
19<body>
20<button id="button1" class="changeBtn">年齢</button>
21<button id="button2" class="changeBtn">出身地</button>
22<button id="button3" class="changeBtn">備考</button>
23
24<div id="blockA" class="changeBlock ageView">
25<span id="name_a" class="nameSpan">名前A：</span>
26<span id="age_a" class="ageSpan">年齢A</span>
27<span id="address_a" class="addressSpan">出身地A</span>
28<span id="etc_a" class="etcSpan">備考A</span>
29</div>
30
31<div id="blockB" class="changeBlock ageView">
32<span id="name_b" class="nameSpan">名前B：</span>
33<span id="age_b" class="ageSpan">年齢B</span>
34<span id="address_b" class="addressSpan">出身地B</span>
35<span id="etc_b" class="etcSpan">備考B</span>
36</div>
37
38<div id="blockC" class="changeBlock ageView">
39<span id="name_c" class="nameSpan">名前C：</span>
40<span id="age_c" class="ageSpan">年齢C</span>
41<span id="address_c" class="addressSpan">出身地C</span>
42<span id="etc_c" class="etcSpan">備考C</span>
43</div>
44
45<script>
46
47
48$(function(){
49  $('.changeBtn').on('click', function(){
50    var idNo = parseInt(this.id.slice(-1));
51    var addClass;
52    switch(idNo) {
53      case 1:
54        addClass = 'ageView';
55      break;
56      case 2:
57        addClass = 'addressView';
58      break;
59      case 3:
60        addClass = 'etcView';
61      break;
62      default:
63        addClass = 'ageView';
64      break;
65    }
66    $('.changeBlock').removeClass('ageView addressView etcView').addClass(addClass);
67    
68  });
69});
70
71</script>
72
73</body>
74</html>