【JavaScript】タブを切り替えると中身が表示されなくなります

Question

前提・実現したいこと

今、RailsとJavaScriptを用いてCtoCで旅行の案内ができる人と案内してほしい人をマッチングさせるアプリを制作しておりまして、
旅行の案内をする人をツアーキャスト、旅行の案内を受ける人をツアーゲストと定義しています。
ユーザーは、ツアーキャストとしてもツアーゲストとしても投稿することができ、その投稿に対して他のユーザーが申し込むことができます。

今実現したいことは、そのアプリのマイページで、自分が投稿した投稿と申し込んだ投稿をタブの切り替えで見られるようにすることです。
ここでは、自分が投稿した投稿を@giving_post_○s、申し込んだ投稿を@taking_post_○sと定義しています。
また、○の部分にはツアーゲストの投稿の場合gが、ツアーキャストの投稿の場合はcが入ります。

画像のように左側に「投稿一覧」「申込済み」、
右側の上部に「ツアーゲストの投稿」「ツアーキャストの投稿」というタブをつくりました。

例えば「申込済み」と「ツアーキャストの投稿」のタブをクリックすると、
申込済みの投稿の中でツアーキャストの投稿のみ表示されるようにしたいです。

実際にコードを書いてみたところ、投稿一覧はツアーゲストとツアーキャスト両方見られるのですが、
申込済みのツアーキャストの投稿が表示されません。
（そもそも表示させる投稿がない場合、「投稿がありません」と表示されるようにしているので、
うまく実装できていれば何も表示されないということはないはずです）
また、一度申込済みのツアーキャストの投稿をクリックすると申込済みのツアーゲストも表示されなくなってしまいます。

こちらの原因と解決方法を教えていただけないでしょうか？

該当のソースコード

▼views/users/show.html.haml

.Mypage_lower 
  - if user_signed_in? && @user.id == current_user.id
    .Mypage_lower__Btns
      = link_to "投稿一覧", "#", class: "Post_type_btn Active1"
      = link_to "申込済み", "#", class: "Post_type_btn"
  .User_page_tabs
    = link_to "ツアーゲストの投稿", "#", class: "User_page_tab Active2"
    = link_to "ツアーキャストの投稿", "#", class: "User_page_tab"

  
  .Mypage_lower__Content.Show1
    .User_posts.Show2
      - if @giving_post_gs.empty?
        .Empty 投稿がありません
      - else
        .Post_index
          - @giving_post_gs.each do |post|
            = render partial: "posts_g/post", locals: { post: post }
    .User_posts
      - if @giving_post_cs.empty?
        .Empty 投稿がありません
      - else
        .Post_index
          - @giving_post_cs.each do |post|
            = render partial: "posts_c/post", locals: { post: post }

  .Mypage_lower__Content
    .User_posts.Show2
      - if @taking_post_gs.empty?
        .Empty 投稿がありません
      - else
        .Post_index
          - @taking_post_gs.each do |post|
            = render partial: "posts_g/post", locals: { post: post }
    .User_posts
      - if @taking_post_cs.empty?
        .Empty 投稿がありません
      - else
        .Post_index
          - @taking_post_cs.each do |post|
            = render partial: "posts_c/post", locals: { post: post }

▼user.js

$(function() {
  let btns = $(".Post_type_btn");

  function btnSwitch() {
    $(".Active1").removeClass("Active1");
    $(this).addClass("Active1");
    const index = btns.index(this);
    $(".Mypage_lower__Content").removeClass("Show1").eq(index).addClass("Show1");
  }
  btns.click(btnSwitch);
});

$(function() {
  let tabs = $(".User_page_tab");

  function tabSwitch() {
    $(".Active2").removeClass("Active2");
    $(this).addClass("Active2");
    const index = tabs.index(this);
    $(".User_posts").removeClass("Show2").eq(index).addClass("Show2");
  }
  tabs.click(tabSwitch);
});

▼user.scss

.Mypage_lower {
  position: relative;
  &__Btns {
    position: absolute;
    top: 50px;
    left: -120px;
    .Post_type_btn {
      color: gray;
      font-weight: bold;
      margin-bottom: 30px;
      display: block;
    }
    .Active1 {
      color: $orange1;
    }
  }
  .User_page_tabs {
    width: 880px;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    margin-bottom: 15px;
    .User_page_tab {
      height: 33px;
      width: 170px;
      text-align: center;
      font-weight: bold;
      color: gray;
    }
    .Active2 {
      color: $orange1;
      border-bottom: solid 2px $orange1;
    }
  }
  .Mypage_lower__Content {
    display: none;
    .User_posts {
      display: none;
    }
    .Show2 {
      display: block;
    }
  }
  .Show1 {
    display: block;
  }
}

Comments

[m.ts10806]

>show.html.haml

今回つけられたタグだけだとアドバイス付きづらいかと思いますが・・

[kumamin]

ご指摘ありがとうございます。
タグを追加しました。

[m.ts10806]

でしたら、タイトルに書かなくて良いですよ。
タグにある内容を再掲しても冗長になって要件部分が伝わりにくくなるだけなので。

[kumamin]

かしこまりました。

Answer 1

jQueryの詳しい挙動を知らないので、予想ですが、考察を落とします。

1. Post_type_btnのどちらを押したか、をindexで取得する
2. 一旦すべてdisplay: noneにする
3. 1で取得したindexが1番目だった場合、Mypage_lower__Contentの1番目にclassを追加して表示する

という形だと思うのですが、

User_page_tabのリンクは2つに対し、User_postsはページ内に4つ存在します。
（投稿一覧と申込み済みのそれぞれに2つづつUser_postsが存在するため）

そのためindex0, 1である投稿一覧のツアーゲストとツアーキャストは切り替えできるが、
index2, 3である申込済のツアーゲストとツアーキャストを表示できないのだと思います。

jQueryの2個目のfunctionを変える必要がありますね。

Comments

[kumamin]

おかげさまで、解決できました。
前回に引き続きご丁寧に回答していただき、大変助かりました。
ありがとうございます！

[necocoa]

解決できてよかったです！
JavaScriptのデバックはchromeのデベロッパーツールを使って、自分がやりたい挙動をしているかどうかなど確認してみると良いと思います！
今回だとHTMLを見て、リンクをクリックした時に自分が想定した部分にClassが付与されたかどうか、を確認してみたら発見できたかと思います。
これからも学習ファイトです！

[kumamin]

なるほど！
デベロッパーツールを使って自分でデバックできるようになれるよう、頑張ります。
誠にありがとうございます！！