取り組んでいること
Railsを使って簡単なWebアプリケーションを作成しています。
投稿に対して評価するレビュー機能を作成していて、星を使って五段階評価できるようにしたいと思い,
jQuery Ratyを使って実装することにしました。
参考にした記事
起きている問題
この状態で、ブラウザの戻るボタンをクリックし、さらに進むボタンをクリックします。(元のページに戻った状態にする。)
すると星の表示が、画像のように増えてしまいます。
この状態でもう一度戻るボタン、進むボタンを押すとさらに5つ星が追加されて表示されてしまいます。
一連の動作を行った回数だけ、星の数も増えてしまう不具合が発生しています。
ソースコード
ruby
1# index.html.erb 2<div class="review"> 3 <h4 class="mb-3"><%= @event.title %>のレビュー</h4> 4 <div class="mb-3"> 5 星5つ中<%= @reviews.all.average(:rate) %> 6 <%= render @reviews %> 7 <p><%= link_to 'レビューを書く', new_event_review_path %></p> 8 9 <%= page_entries_info @reviews %> 10 <%= paginate @reviews %> 11 </div> 12</div> 13
ruby#
1# _review.html.erb 2<div class="mb-4"> 3 <div class="mb-3"> 4 <%= image_tag review.user.image, class: "user-img-review"%> 5 <span class="pl-1"><%= link_to review.user.name, user_path(review.user)%></span> 6</div> 7 <div class="mb-3"> 8 <span class="mr-2" id="star-rate-<%= review.id %>"></span> 9 <span class="review-title"><%= review.title %></span> 10 </div> 11 <%= review.text %> 12 <div class="mt-3"> 13 <% if current_user==review.user %> 14 <%= link_to 'レビューを削除', event_review_path(@event, review), method: :delete, data: { confirm: "本当に削除しますか?" } %> 15 <% end %> 16 </div> 17</div> 18 19<script> 20 $('#star-rate-<%= review.id %>').raty({ 21 size: 36, 22 starOff: '<%= asset_path('star-off.png') %>', 23 starOn : '<%= asset_path('star-on.png') %>', 24 starHalf: '<%= asset_path('star-half.png') %>', 25 half: true, 26 readOnly: true, 27 score: <%= review.rate %> 28 }); 29</script>
知りたいこと
デベロッパーツールやコードを何度も見てみましたが、原因がわからないので投稿させていただきました。
jQuery、JavaScriptに詳しい方がいましたら、ここが怪しい等のアドバイスをいただけると助かります。
回答2件
あなたの回答
tips
プレビュー