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>
回答2件
あなたの回答
tips
プレビュー