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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

Q&A

解決済

1回答

1426閲覧

rails 3つ星評価を実装したいです。

mansan

総合スコア11

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

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

1グッド

1クリップ

投稿2021/04/25 05:42

編集2021/04/28 04:08

前提・実現したいこと

星をクリックして、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に紐付いています。

shinoharat👍を押しています

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

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

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

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

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

shinoharat

2021/04/26 08:10

config/routes.rb を質問文に追加してください ????
mansan

2021/04/28 04:09

回答ありがとうございます。追加させていただきました。
guest

回答1

0

自己解決

とりあえず、ビューの条件分岐で無理やり実装できました。
コードの可視性が悪いので、他に良い方法があればアドバイスお願いします。。

投稿2021/04/28 04:12

編集2021/04/28 04:19
mansan

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問