前提・実現したいこと
星をクリックして、DBに数値を反映させることはできましたが、星を1つクリックしたとして、3つとも全ての星の色が変わってしまいます。DBには正しい値が格納されるのですが、表示がうまくいきません。一つ目の星をクリックしたら、その星だけ色を変えたいです。どのようにするのが望ましいでしょうか?また、動作が重くなる等、この評価の実装のやり方自体変えたほうが良ければ、アドバイスをお願いいたします。
該当のソースコード
Ruby
1class RatesController < ApplicationController 2 before_action :set_boke_video 3 def rate 4 @rates_count = params[:rate_count].to_i 5 @rates_count.times do 6 rate = current_user.rates.new(boke_video_id: @boke_video.id) 7 rate.save 8 end 9 redirect_to boke_videos_path 10 end 11 12 def unrate 13 rate = current_user.rates.where(boke_video_id: @boke_video.id) 14 rate.destroy_all 15 redirect_to boke_videos_path 16 end 17 18 private 19 20 def set_boke_video 21 @boke_video = BokeVideo.find(params[:boke_video_id]) 22 end 23end 24
<%# 現在のユーザーが既に評価してたら %> <% if current_user.rates.find_by(boke_video_id: boke_video.id) %> <%# ratesコントローラのunrateメソッドを実行 %> <%= link_to unrate_path(boke_video.id), method: :delete do %> <div class="rate"><i class="fas fa-star size"></i></div> <% end %> <%= link_to unrate_path(boke_video.id), method: :delete do %> <div class="rate"><i class="fas fa-star size"></i></div> <% end %> <%= link_to unrate_path(boke_video.id), method: :delete do %> <div class="rate"><i class="fas fa-star size"></i></div> <% end %> <%# 現在のユーザが評価してなかったら %> <% else %> <%# ratesコントローラのrateメソッドを実行 %> <%= link_to rate_path(boke_video.id, rate_count: 1), method: :boke_video do %> <div class="unrate"><i class="far fa-star size"></i></div> <% end %> <%= link_to rate_path(boke_video.id, rate_count: 2), method: :boke_video do %> <div class="unrate"><i class="far fa-star size"></i></div> <% end %> <%= link_to rate_path(boke_video.id, rate_count: 3), method: :boke_video do %> <div class="unrate"><i class="far fa-star size"></i></div> <% end %> <% end %> <%= boke_video.rates.count %>
CSS
1.size { 2 font-size:2.0em; /*1.5倍にする*/ 3 color:#ebbf2a; /*黃色にする*/ 4}
ruby
1Rails.application.routes.draw do 2 resources :boke_videos, :except => [:edit, :destroy, :update] 3 devise_for :users 4 resources :videos, :except => [:edit, :destroy, :update] 5 # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html 6 root 'videos#index' 7 post '/rate/:boke_video_id' => 'rates#rate', as: 'rate' 8 delete '/rate/:boke_video_id' => 'rates#unrate', as: 'unrate' 9end
試したこと
link_to のclassに、クリックされたらcssを追加するやり方を試しましたが、CSSを維持したり、2つ目の星をクリックした時に1つ目の星と2つ目の星の色を変えるようにするので悩みました。
補足情報(FW/ツールのバージョンなど)
counter_cacheで星の数をカウントしています。
rateテーブルは、他テーブルのuser_idと他テーブルのboke_video_idに紐付いています。
回答1件
あなたの回答
tips
プレビュー