###現状
コードを載せたリンク先です。
https://jsfiddle.net/ululami/5a727gj1/
htmlを読み込んだ状態では順位と金額は空の状態です。
一度左のメニュー1かメニュー2をクリックしてから、右の地域をクリックするとその下に順位と金額が表示されます。
右の地域をクリックして、順位と金額が表示されている状態で、例えばメニュー1が選択された状態からメニュー2をクリックしても順位と金額は変化しません。
###実装したいこと
htmlを読み込んだらメニュー1の地域1が選択された状態(背景が灰色)でそれの順位と金額を表示し、
メニュー1の地域1が選択された状態からメニュー2をクリックすると地域1の順位と金額が変更されるようにしたいです。
例としてメニュー1の地域1の順位が2位、金額が7000円で、
メニュー2の地域1の順位が、3位、金額が9000円です。
他の地域2〜地域5も同じ様に変更させたいです。
###ためしたこと
on(click)までを関数化しているために上手く実装できていないことは分かるのですが、
どの機能の部分を上手に関数化、分けるのかが上手くわかりません。
いろいろと試してみたのですが、ここまでくるので精一杯でした。
###該当のソースコード
javascript
1var menu1_rank = ['2','3','1','5','4']; 2var menu1_money = ['7000','6000','9000','4000','5000']; 3 4var menu2_rank = ['3','1','2','4','5']; 5var menu2_money = ['9000','12000','10000','8000','5000']; 6 7 8function menu1(){ 9 $('.area1').on('click',function(){ 10 $('.result__rank').text(menu1_rank[0]); 11 $('.result__money').text(menu1_money[0]); 12 $('.area1').css('background','#ccc'); 13 $('.area2').css('background',''); 14 $('.area3').css('background',''); 15 $('.area4').css('background',''); 16 $('.area5').css('background',''); 17 }); 18 19 $('.area2').on('click',function(){ 20 $('.result__rank').text(menu1_rank[1]); 21 $('.result__money').text(menu1_money[1]); 22 $('.area2').css('background','#ccc'); 23 $('.area1').css('background',''); 24 $('.area3').css('background',''); 25 $('.area4').css('background',''); 26 $('.area5').css('background',''); 27 }); 28 29 $('.area3').on('click',function(){ 30 $('.result__rank').text(menu1_rank[2]); 31 $('.result__money').text(menu1_money[2]); 32 $('.area3').css('background','#ccc'); 33 $('.area1').css('background',''); 34 $('.area2').css('background',''); 35 $('.area4').css('background',''); 36 $('.area5').css('background',''); 37 }); 38 39 $('.area4').on('click',function(){ 40 $('.result__rank').text(menu1_rank[3]); 41 $('.result__money').text(menu1_money[3]); 42 $('.area4').css('background','#ccc'); 43 $('.area1').css('background',''); 44 $('.area2').css('background',''); 45 $('.area3').css('background',''); 46 $('.area5').css('background',''); 47 }); 48 49 $('.area5').on('click',function(){ 50 $('.result__rank').text(menu1_rank[4]); 51 $('.result__money').text(menu1_money[4]); 52 $('.area5').css('background','#ccc'); 53 $('.area1').css('background',''); 54 $('.area2').css('background',''); 55 $('.area3').css('background',''); 56 $('.area4').css('background',''); 57 }); 58} 59 60function menu2(){ 61 $('.area1').on('click',function(){ 62 $('.result__rank').text(menu2_rank[0]); 63 $('.result__money').text(menu2_money[0]); 64 }); 65 66 $('.area2').on('click',function(){ 67 $('.result__rank').text(menu2_rank[1]); 68 $('.result__money').text(menu2_money[1]); 69 }); 70 71 $('.area3').on('click',function(){ 72 $('.result__rank').text(menu2_rank[2]); 73 $('.result__money').text(menu2_money[2]); 74 }); 75 76 $('.area4').on('click',function(){ 77 $('.result__rank').text(menu2_rank[3]); 78 $('.result__money').text(menu2_money[3]); 79 }); 80 81 $('.area5').on('click',function(){ 82 $('.result__rank').text(menu2_rank[4]); 83 $('.result__money').text(menu2_money[4]); 84 }); 85} 86 87$(function(){ 88 $('.menu1').on('click',function(){ 89 $('.menu1').css('background','#ccc'); 90 $('.menu2').css('background',''); 91 menu1(); 92 }); 93 94 $('.menu2').on('click',function(){ 95 $('.menu2').css('background','#ccc'); 96 $('.menu1').css('background',''); 97 menu2(); 98 }); 99});
html
1 <div class="wrapper"> 2 <div class="menu"> 3 <h2 class="menu1">メニュー1</h2> 4 <h2 class="menu2">メニュー2</h2> 5 </div> 6 <div class="content"> 7 <ul class="area"> 8 <li class="area1">地域1</li> 9 <li class="area2">地域2</li> 10 <li class="area3">地域3</li> 11 <li class="area4">地域4</li> 12 <li class="area5">地域5</li> 13 </ul> 14 <div class="result"> 15 <p>順位:<span class="result__rank"></span>位</p> 16 <p>金額:<span class="result__money"></span>円</p> 17 </div> 18 </div> 19 </div>
css
1*{ 2 margin: 0; 3 padding: 0; 4} 5 6ul{ 7 list-style: none; 8} 9 10.wrapper{ 11 width: 700px; 12 margin: 50px auto 0; 13 display: flex; 14 justify-content: space-between; 15} 16 17.menu{ 18 width: 150px; 19} 20 21.menu h2, 22.menu li{ 23 cursor: pointer; 24} 25 26.content{ 27 width: 450px; 28} 29 30.result{ 31 margin-top: 30px; 32} 33 34.area li{ 35 display: inline-block; 36 margin-right: 10px; 37 cursor: pointer; 38}
###補足情報(言語/FW/ツール等のバージョンなど)
jqueryのバージョンは2.2.4.minです。
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/05 11:24