お世話になります。
今、本レビューアプリを作成していて、レビュー一覧画面にレーティング情報(星)を表示させようと考えています。
配列でない、投稿単体(showページ)での星の表示はできているのですが、
indexページにて配列をeachした際に一番初めの投稿のレーティング情報が他の投稿に全て反映されてしまいます。
レーティング情報の取得はdata属性に情報を埋め込み、star.jsからdata属性を読み込んで、.star1に表示させるようにしています。
そこで、showpageではなく、indexページ(投稿が多くある状態)でレーティング情報を表示させる方法をご教示頂きたいです。
#ソースコード
star
1$(document).on('turbolinks:load', function() { 2 var rate = $('.star1').attr('data-rating'); 3 $('.star1').raty({ 4 space: false, 5 size : 36, 6 readOnly: true, 7 score:rate, 8 starOff: '<%= asset_path('star-off.png') %>', 9 starOn : '<%= asset_path('star-on.png') %>', 10 }); 11 });
index
1.main-contents__reviews 2 .row.no-gutters.p-lg-4 3 - review.each do | book | 4 .col-xs-3.col-sm-9.col-lg-3 5 - colors = %w|#dc143c #d2691e #808000 #0000cd #556b2f| 6 .container-fluid 7 .card 8 .card-head{style: "background-color: #{colors.sample}"} 9 .card-image 10 - if book.image_url? 11 = link_to image_tag(book.image_url.to_s,class:"mx-auto d-block"),review_path(book.id) 12 - else 13 = link_to image_tag("no_image.jpg",class:"rounded mx-auto d-block"),review_path(book.id) 14 .card-title 15 = book.name 16 .card-text 17 = book.review.truncate(150) 18 .card-more 19 = link_to 'more',review_url(book.id) 20 %div.star1{data: {rating: book.rate}} //該当のコードです。 21 .text-footer 22 .text-user 23 by 24 - if book.user.nickname? 25 = link_to "#{book.user.nickname}", "users/#{book.user.id}" 26 - else 27 = link_to "#{book.user.name}", "users/#{book.user.id}" 28 .text-muted 29 = book.updated_at.strftime("%Y/%m/%d") 30= paginate review 31
ほかに必要なコードがありましたら、ご指摘ください。
よろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。