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

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

ただいまの
回答率

88.91%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,009

owl

score 42

現状

コードを載せたリンク先です。
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)までを関数化しているために上手く実装できていないことは分かるのですが、
どの機能の部分を上手に関数化、分けるのかが上手くわかりません。
いろいろと試してみたのですが、ここまでくるので精一杯でした。

該当のソースコード

var menu1_rank = ['2','3','1','5','4'];
var menu1_money = ['7000','6000','9000','4000','5000'];

var menu2_rank = ['3','1','2','4','5'];
var menu2_money = ['9000','12000','10000','8000','5000'];


function menu1(){
    $('.area1').on('click',function(){
        $('.result__rank').text(menu1_rank[0]);
        $('.result__money').text(menu1_money[0]);
        $('.area1').css('background','#ccc');
        $('.area2').css('background','');
        $('.area3').css('background','');
        $('.area4').css('background','');
        $('.area5').css('background','');
    });

    $('.area2').on('click',function(){
        $('.result__rank').text(menu1_rank[1]);
        $('.result__money').text(menu1_money[1]);
        $('.area2').css('background','#ccc');
        $('.area1').css('background','');
        $('.area3').css('background','');
        $('.area4').css('background','');
        $('.area5').css('background','');
    });

    $('.area3').on('click',function(){
        $('.result__rank').text(menu1_rank[2]);
        $('.result__money').text(menu1_money[2]);
        $('.area3').css('background','#ccc');
        $('.area1').css('background','');
        $('.area2').css('background','');
        $('.area4').css('background','');
        $('.area5').css('background','');
    });

    $('.area4').on('click',function(){
        $('.result__rank').text(menu1_rank[3]);
        $('.result__money').text(menu1_money[3]);
        $('.area4').css('background','#ccc');
        $('.area1').css('background','');
        $('.area2').css('background','');
        $('.area3').css('background','');
        $('.area5').css('background','');
    });

    $('.area5').on('click',function(){
        $('.result__rank').text(menu1_rank[4]);
        $('.result__money').text(menu1_money[4]);
        $('.area5').css('background','#ccc');
        $('.area1').css('background','');
        $('.area2').css('background','');
        $('.area3').css('background','');
        $('.area4').css('background','');
    });
}

function menu2(){
    $('.area1').on('click',function(){
        $('.result__rank').text(menu2_rank[0]);
        $('.result__money').text(menu2_money[0]);
    });

    $('.area2').on('click',function(){
        $('.result__rank').text(menu2_rank[1]);
        $('.result__money').text(menu2_money[1]);
    });

    $('.area3').on('click',function(){
        $('.result__rank').text(menu2_rank[2]);
        $('.result__money').text(menu2_money[2]);
    });

    $('.area4').on('click',function(){
        $('.result__rank').text(menu2_rank[3]);
        $('.result__money').text(menu2_money[3]);
    });

    $('.area5').on('click',function(){
        $('.result__rank').text(menu2_rank[4]);
        $('.result__money').text(menu2_money[4]);
    });
}

$(function(){
    $('.menu1').on('click',function(){
        $('.menu1').css('background','#ccc');
        $('.menu2').css('background','');
        menu1();
    });

    $('.menu2').on('click',function(){
        $('.menu2').css('background','#ccc');
        $('.menu1').css('background','');
        menu2();
    });
});
    <div class="wrapper">
        <div class="menu">
            <h2 class="menu1">メニュー1</h2>
            <h2 class="menu2">メニュー2</h2>
        </div>
        <div class="content">
            <ul class="area">
                <li class="area1">地域1</li>
                <li class="area2">地域2</li>
                <li class="area3">地域3</li>
                <li class="area4">地域4</li>
                <li class="area5">地域5</li>
            </ul>
            <div class="result">
                <p>順位:<span class="result__rank"></span></p>
                <p>金額:<span class="result__money"></span></p>
            </div>
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}

ul{
    list-style: none;
}

.wrapper{
    width: 700px;
    margin: 50px auto 0;
    display: flex;
    justify-content: space-between;
}

.menu{
    width: 150px;
}

.menu h2,
.menu li{
    cursor: pointer;
}

.content{
    width: 450px;
}

.result{
    margin-top: 30px;
}

.area li{
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

補足情報(言語/FW/ツール等のバージョンなど)

jqueryのバージョンは2.2.4.minです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

これは、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/05 20:43

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

    キャンセル

+3

こんな感じでしょうか?

.active{background-Color:#c0c0c0;}
$(function(){
  var datas=[
    {
      "rank":['2','3','1','5','4'],
      "money":['7000','6000','9000','4000','5000'],
    },
    {
      "rank":['3','1','2','4','5'],
      "money":['9000','12000','10000','8000','5000'],
    },
  ];
  $('.menu h2,.content li').on('click',function(){
    $(this).addClass('active').siblings().removeClass('active');
    var menu=$('.menu h2').index($('.menu h2.active'));
    var area=$('.content li').index($('.content li.active'));
    if(menu>=0 && area>=0){
      $('.result__rank').text(datas[menu]["rank"][area]);
      $('.result__money').text(datas[menu]["money"][area]);
    };
  });
});
<div class="wrapper">
<div class="menu">
<h2 class="menu1">メニュー1</h2>
<h2 class="menu2">メニュー2</h2>
</div>
<div class="content">
<ul class="area">
<li class="area1">地域1</li>
<li class="area2">地域2</li>
<li class="area3">地域3</li>
<li class="area4">地域4</li>
<li class="area5">地域5</li>
</ul>
<div class="result">
<p>順位:<span class="result__rank"></span></p>
<p>金額:<span class="result__money"></span></p>
</div>
</div>
</div>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/05 20:24

    回答ありがとうございます。
    まさに私が実装したいことです。本当にありがとうございます。
    一つ質問があるのですが、htmlを読み込んだ時に初期値としてメニュー1の地域1が選択された状態で、尚且つその順位と金額が表示されるにはどうすればよいでしょうか。

    yambejp様のコードをjsfiddleにアップ致しましたので、もし良ければご回答のほどよろしくお願いします。
    https://jsfiddle.net/ululami/0gfjwLtL/1/

    キャンセル

checkベストアンサー

+2

MENU_RANK=[],MENU_MONEY=[];
MENU_MONEY.push([7000,6000,9000,4000,5000]);
MENU_MONEY.push([9000,12000,10000,8000,5000]);
MENU_RANK.push([2,3,1,5,4]);
MENU_RANK.push([3,1,2,4,5]);
console.log(MENU_MONEY);
console.log(MENU_RANK);
var MENU=-1,AREA=0;
$(".menu>h2").on("click",function(){
 MENU=$(this).index();
 RANK_MONEY();
});
$(".area>li").on("click",function(){
 AREA=$(this).index();
 RANK_MONEY();
});
function RANK_MONEY(){
 if(MENU<0)return false;
 $(".menu").children().css("background","").eq(MENU).css("background","#ccc");
 $(".area>li").css("background","").eq(AREA).css('background','#ccc');
 $('.result__rank').text(MENU_RANK[MENU][AREA]);
 $('.result__money').text(MENU_MONEY[MENU][AREA]);
}


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/06 18:43

    ご回答ありがとうございます。
    見事にhtmlの読み込みと同時に金額と順位が読み込まれました。
    本当にありがとうございます。

    最後に一つ質問があるのですが、最初に書いてもらったコードにMENU=-1とあるのですが、-1を指定しているのはなぜなのでしょうか。
    もしこれもお時間があればご回答いただけると幸いです。よろしくお願いします。

    キャンセル

  • 2017/05/06 21:54

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

    キャンセル

  • 2017/05/06 22:11

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

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る