前提・実現したいこと
上記の(1)から(2)へとページ内遷移ができるようにしたいです。
カードはeach文を使用しています。
試したこと
・アンカーリンクを利用するのだと考え、取り入れようとしたが、each
文により作成されるデータのprefecture_id
をうまく取得できなかった。
また、下記の方法だとidが1つのみしか対応できず、each文では利用が難しいのではないかと考えた。
Rails アンカーリンクを使い遷移先ページの場所(位置)を指定する
ソースコード
_prefectures.html
<div class="card border-primary"> <table class="table"> <tbody> <tr> <th>北海道</th> <td><a class="mr-4" href="prefectures/:id/1">北海道</td> </tr> <tr> <th>東北</th> <td><a class="mr-4" href="prefectures/:id/2">青森</a> <a class="mr-4" href="prefectures/:id/3">岩手</a> <a class="mr-4" href="prefectures/:id/4">宮城</a> <a class="mr-4" href="prefectures/:id/5">秋田</a> <a class="mr-4" href="prefectures/:id/6">山形</a> <a class="mr-4" href="prefectures/:id/7">福島</a></td> </tr> <tr> <th>関東</th> <td><a class="mr-4" href="prefectures/:id/8">東京</a> <a class="mr-4" href="prefectures/:id/9">神奈川</a> <a class="mr-4" href="prefectures/:id/10">埼玉</a> <a class="mr-4" href="prefectures/:id/11">千葉</a> <a class="mr-4" href="prefectures/:id/12">茨城</a> <a class="mr-4" href="prefectures/:id/13">栃木</a> <a class="mr-4" href="prefectures/:id/14">群馬</a></td> </tr> <tr> <th>中部</th> <td><%= link_to "山梨", spots_path(@spot, anchor: "prefectures/15"), class: "mr-4" %> <a class="mr-4" href="prefectures/:id/16">新潟</a> <a class="mr-4" href="prefectures/:id/17">長野</a> <a class="mr-4" href="prefectures/:id/18">富山</a> <a class="mr-4" href="prefectures/:id/19">石川</a> <a class="mr-4" href="prefectures/:id/20">福井</a> <a class="mr-4" href="prefectures/:id/21">愛知</a> <a class="mr-4" href="prefectures/:id/22">岐阜</a> <a class="mr-4" href="prefectures/:id/23">静岡</a></td> </tr> <tr> <th>近畿</th> <td><a class="mr-4" href="prefectures/:id/24">三重</a> <a class="mr-4" href="prefectures/:id/25">大阪</a> <a class="mr-4" href="prefectures/:id/26">兵庫</a> <a class="mr-4" href="prefectures/:id/27">京都</a> <a class="mr-4" href="prefectures/:id/28">滋賀</a> <a class="mr-4" href="prefectures/:id/29">奈良</a> <a class="mr-4" href="prefectures/:id/30">和歌山</a></td> </tr> <tr> <th>中国</th> <td><a class="mr-4" href="prefectures/:id/31">鳥取</a> <a class="mr-4" href="prefectures/:id/32">島根</a> <a class="mr-4" href="prefectures/:id/33">岡山</a> <a class="mr-4" href="prefectures/:id/34">広島</a> <a class="mr-4" href="prefectures/:id/35">山口</a></td> </tr> <tr> <th>四国</th> <td><a class="mr-4" href="prefectures/:id/36">徳島</a> <a class="mr-4" href="prefectures/:id/37">香川</a> <a class="mr-4" href="prefectures/:id/38">愛媛</a> <a class="mr-4" href="prefectures/:id/39">高知</a></td> </tr> <tr> <th>九州</th> <td><a class="mr-4" href="prefectures/:id/40">福岡</a> <a class="mr-4" href="prefectures/:id/41">佐賀</a> <a class="mr-4" href="prefectures/:id/42">長崎</a> <a class="mr-4" href="prefectures/:id/43">熊本</a> <a class="mr-4" href="prefectures/:id/44">大分</a> <a class="mr-4" href="prefectures/:id/45">宮崎</a> <a class="mr-4" href="prefectures/:id/46">鹿児島</a> <a class="mr-4" href="prefectures/:id/47">沖縄</a></td> </tr> </tbody> </table> </div>
_spot.html
<div class="row row-cols-1 row-cols-md-3 g-4"> <% @spots.each do |spot| %> <div class="col"> <div class="card h-100 border-primary"> <%= image_tag spot.photo, class: "card-img-top"%> <div class="card-body"> <h5 class="card-title text-center font-weight-bold"><%= spot.spot_name %></h5> <p class="text-right"><%= link_to spot.prefecture.prefecture_name %></p> <p class="card-text"><%= spot.content %></p> </div> <div class="card-footer"> <%= link_to "詳細", spot, class: 'btn btn-info btn-lg rounded-pill btn-block' %> <br class="my-7"> <%= link_to 'スポットを追加!!',"#", class: 'btn btn-add btn-lg rounded-pill btn-block' %> </div> </div> </div> <% end %> </div>
spots_controller
class SpotsController < ApplicationController def index @prefectures = Prefecture.all @q = Spot.ransack(params[:q]) @spots = Spot.includes(:likes).order(id: :asc) end def show @spot = Spot.find(params[:id]) @comment = current_user.comments.new @comments = @spot.comments.order(created_at: :desc) end private def spot_params params.require(:spot).permit(:spot_name, :content, :photo, :prefecture_id) end end
テーブル
prefectures | |
---|---|
PK | prefecture_id |
列1 | spots |
---|---|
PK | spot_id |
FK | prefecture_id |
1対多です。
環境
rails6.1.3.2
ruby2.7.3
devise
bootstrap4
最後に
実装するにあたり、ヒントまたはアドバイスを頂けますでしょうか。
お忙しい中、恐れ入りますがよろしくお願いします。
あなたの回答
tips
プレビュー