パーツ番号 08-03-11 ・ JavaScript使用

星評価入力(クリック選択)

星にホバーすると選択予定の数までプレビューで色付き、クリックで確定します。WordPressのレビュー投稿フォームや満足度アンケートに使えます。

hoverclickjsinput

プレビュー

ソースコード

HTML

<div class="d08-03-11-stars" role="radiogroup" aria-label="評価">
          <button type="button" class="d08-03-11-s" data-v="1">★</button>
          <button type="button" class="d08-03-11-s" data-v="2">★</button>
          <button type="button" class="d08-03-11-s" data-v="3">★</button>
          <button type="button" class="d08-03-11-s" data-v="4">★</button>
          <button type="button" class="d08-03-11-s" data-v="5">★</button>
        </div>
        <p class="d08-03-11-msg">評価を選んでください</p>

CSS

.d08-03-11{flex-direction:column;gap:10px}
        .d08-03-11-stars{display:flex;gap:4px}
        .d08-03-11-s{border:none;background:none;font-size:34px;line-height:1;color:#e2e2e8;cursor:pointer;padding:0;transition:transform .15s,color .15s}
        .d08-03-11-s:hover{transform:scale(1.15)}
        .d08-03-11-s.is-hi{color:#f4b400}
        .d08-03-11-msg{margin:0;font-size:12px;color:#94a3b8}

JavaScript

(function(){
        var root=document.querySelector('#item-08-03-11 .d08-03-11');if(!root)return;
        var wrap=root.querySelector('.d08-03-11-stars'),stars=root.querySelectorAll('.d08-03-11-s'),msg=root.querySelector('.d08-03-11-msg');
        var selected=0;
        function paint(v){stars.forEach(function(s){s.classList.toggle('is-hi',+s.dataset.v<=v);});}
        stars.forEach(function(s){
          s.addEventListener('mouseenter',function(){paint(+s.dataset.v);});
          s.addEventListener('click',function(){selected=+s.dataset.v;msg.textContent=selected+'点で評価しました';});
        });
        wrap.addEventListener('mouseleave',function(){paint(selected);});
      })();

クラス名 .d08-03-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。