[Rails5]Ratyを使用して投稿一覧にレーティング情報を表示させたい。[jQuery]

お世話になります。

今、本レビューアプリを作成していて、レビュー一覧画面にレーティング情報(星)を表示させようと考えています。

配列でない、投稿単体(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件

自己解決

star
1$(document).on('turbolinks:load', function() {
2        $('.star1').raty({
3            space: false,
4            size     : 36,
5            readOnly: true,
6            starOff:  '<%= asset_path('star-off.png') %>',
7            starOn : '<%= asset_path('star-on.png') %>',
8            score:function() {　　　　　　　　　 //ここを変更したら表示できるようになった。
9            return $(this).attr('data-rating');//
10            }
11        });
12    });