raty.jsで小数点以下まで星を表示する方法 #JavaScript

entershareの大森です。
開発している中でratyを使うことがあり、小数点以下までmouse-onした時の値を表示したいことがあったのでその方法を書いておきます。

raty.html

<html>
  <head>
  <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"
  >
  </script>
    <script type="application/javascript" src="./jquery.raty.js"></script>
    <script type="application/javascript">
      $(function(){
        $('#star_field').raty({ 
          target: '#star_input',
          targetType: 'number',
          targetKeep: true,
          precision: true,
          round : { down: .4, full: .6, up: .99 },
          half: true
        });
      });
    </script>
  </head>
  <body>
    <div id="star_field"></div>
    <div id="star_input" style="border: solid 1px; height: 1.5em; width: 2em;"></div>
  </body>
</html>

以上のコードの中で特に大事なのはこの部分です。


targetType: 'number',
targetKeep: true,
precision: true,

このようにすることでtargetの中に表示する値が数字になり、mouse-onが解除された時もクリックされた値が保持されるようになります。
またprecisionをtrueにすることで小数点以下まで値が表示されます。
これがないと小数点以下は表示されません。

使う機会があり小数点以下まで値を取得したい時にはぜひ使ってみてください。