質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1461閲覧

メニューごとにクリックしてもテキストが反映されるようにしたい

owl

総合スコア42

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/05/02 07:01

###現状

コードを載せたリンク先です。
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です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

こんな感じでしょうか?

CSS

1.active{background-Color:#c0c0c0;}

javascript

1$(function(){ 2 var datas=[ 3 { 4 "rank":['2','3','1','5','4'], 5 "money":['7000','6000','9000','4000','5000'], 6 }, 7 { 8 "rank":['3','1','2','4','5'], 9 "money":['9000','12000','10000','8000','5000'], 10 }, 11 ]; 12 $('.menu h2,.content li').on('click',function(){ 13 $(this).addClass('active').siblings().removeClass('active'); 14 var menu=$('.menu h2').index($('.menu h2.active')); 15 var area=$('.content li').index($('.content li.active')); 16 if(menu>=0 && area>=0){ 17 $('.result__rank').text(datas[menu]["rank"][area]); 18 $('.result__money').text(datas[menu]["money"][area]); 19 }; 20 }); 21});

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> 20

投稿2017/05/02 08:40

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/05 11:24

回答ありがとうございます。 まさに私が実装したいことです。本当にありがとうございます。 一つ質問があるのですが、htmlを読み込んだ時に初期値としてメニュー1の地域1が選択された状態で、尚且つその順位と金額が表示されるにはどうすればよいでしょうか。 yambejp様のコードをjsfiddleにアップ致しましたので、もし良ければご回答のほどよろしくお願いします。 https://jsfiddle.net/ululami/0gfjwLtL/1/
guest

0

これは、clickイベントを重複して登録しているのが原因かと思います。
つまり、menu1関数とmenu2関数で、
いちいち同じクラスのものをクリックするイベントを登録してしまっているから、
処理が途中でおかしくなるのだと思います。

つまり、menu1を実行した時は、.area1をクリックしたときに、menu1_rank変数を使うけど、
menu2を実行した時に、再度、.area1をクリックした時に、menu2_rank変数を使うというように、
clickイベントが重複して登録されるために、
menu1の方で登録したclickイベントも実行されてしまっている(menu1_rank変数を使った処理をしてしまっている)のだと思います。

各関数(menu1・menu2)実行の最初に、いったん各.areaクラスのclickイベントを消して、再登録するようにするか、
各.areaクラスの
on('click' function(){});
の処理を、menu1・menu2の外で定義するなどといったような、
全体的な処理の仕方を見直すのがよろしいかと思います。

投稿2017/05/02 08:23

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/05 11:43

ご回答ありがとうございます。 原因はイベントが重複している部分だったんですね。 一度各クラスのクリックイベントを消去して再登録するやり方でやってみようと思います。 ありがとうございます。
guest

0

ベストアンサー

javascript

1MENU_RANK=[],MENU_MONEY=[]; 2MENU_MONEY.push([7000,6000,9000,4000,5000]); 3MENU_MONEY.push([9000,12000,10000,8000,5000]); 4MENU_RANK.push([2,3,1,5,4]); 5MENU_RANK.push([3,1,2,4,5]); 6console.log(MENU_MONEY); 7console.log(MENU_RANK); 8var MENU=-1,AREA=0; 9$(".menu>h2").on("click",function(){ 10 MENU=$(this).index(); 11 RANK_MONEY(); 12}); 13$(".area>li").on("click",function(){ 14 AREA=$(this).index(); 15 RANK_MONEY(); 16}); 17function RANK_MONEY(){ 18 if(MENU<0)return false; 19 $(".menu").children().css("background","").eq(MENU).css("background","#ccc"); 20 $(".area>li").css("background","").eq(AREA).css('background','#ccc'); 21 $('.result__rank').text(MENU_RANK[MENU][AREA]); 22 $('.result__money').text(MENU_MONEY[MENU][AREA]); 23}

同じ書き方のコードがある場合
短縮可能と考えて関数にするのが良いですね

投稿2017/05/02 09:16

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/05 11:41

回答ありがとうございます。 私が実装したい通りに実現していただき本当にありがとうございます。 yambejp様にご質問したことと同じで申し訳ないのですが、 htmlを読み込んだ時に初期値としてメニュー1の地域1が選択された状態で、尚且つその順位と金額が表示されるにはどうすればよいでしょうか。 GW中に申し訳ありませんが、よろしかったらご回答のほどよろしくお願いします。 dot様が書かれたコードをjsfiddleにアップしていますので、 お時間が空いているときにでもよろしくお願いします。 https://jsfiddle.net/ululami/hgr4h632/2/
退会済みユーザー

退会済みユーザー

2017/05/06 03:14

var MENU=0,AREA=0; RANK_MONEY();
owl

2017/05/06 09:43

ご回答ありがとうございます。 見事にhtmlの読み込みと同時に金額と順位が読み込まれました。 本当にありがとうございます。 最後に一つ質問があるのですが、最初に書いてもらったコードにMENU=-1とあるのですが、-1を指定しているのはなぜなのでしょうか。 もしこれもお時間があればご回答いただけると幸いです。よろしくお願いします。
退会済みユーザー

退会済みユーザー

2017/05/06 12:54

通常はメニュークリックして地域をクリックが操作手順かなぁ?と思い var MENU=-1,AREA=0; としてあります var MENU=0,AREA=0; だとメニュー未選択で地域を選択出来てしまいます
owl

2017/05/06 13:11

なるほど、わかりました。 重ね重ね質問にお答えいただきありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問