【Ruby on Rails】Rate.jsを使ったときに星が増えるバグの解消法（jQuery）

#対象者

• レビュー評価を実装している方
• 星が増える不具合を実装している方

#目的

• 星が増える不具合を解消して、星を5個で収める

#実際の手順と実例
###1.結論（解決策）

scriptタグに$('').empty();を追加すればOK！

下記例です
div.rateの部分は人によって違うと思います。

    <script>
      $(document).on("turbolinks:load", function() {
      $('div.rate').empty();　#これを追加しました
      $('div.rate').raty({
          size: 14,
          starOff:  '<%= asset_path('star-off.png') %>',
          starOn : '<%= asset_path('star-on.png') %>',
          starHalf: '<%= asset_path('star-half.png') %>',
          half: true,
          readOnly: true,
        });
      });
    </script>

###2.原因

1. 星の表示されてるページから
2. 他のページへ遷移
3. その後、再度星が表示されているページへ

この間に星が削除されていない（保存されたまま？？）のが原因みたいです。

###3..emptyメソッドについて

下記記事によると

jQueryオブジェクトで指定した要素の内容（子孫要素やテキストなど）を削除します。jQueryオブジェクトで指定した要素は削除しません。

とありました。

つまり、
ページ再読み込み時に

1. まず子要素である"div.rate"を.emptyで削除
2. その後、.rateで星を表示

となって星５個の表示が保たれています。

#参照

emptyメソッド - 初心者向けのjQuery入門講座

####投稿者コメント

今回は「どのような流れでそうなったか」という点に重きを置いて記事を書いてみました。次回以降の投稿でもどのような手順でそうなったかを曖昧にさせないように理解しながら書いていきたいと思います。

星が増えるとなんか笑っちゃいますよね。笑

####My Profile
プログラミング学習歴３ヶ月目のアカウントです！
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。