パーツ番号 10-02-03 ・ JavaScript使用

時間スロット選択

10:00からの予約枠ボタン。空きは選択可能、満席は無効で押せません。選択すると色が付きます。WordPressの来店・施術予約の枠選択に。

bookingjs

プレビュー

ソースコード

HTML

<div class="d10-02-03-wrap">
          <div class="d10-02-03-title">予約枠を選択</div>
          <div class="d10-02-03-grid">
            <button class="d10-02-03-slot" data-full="0">10:00</button>
            <button class="d10-02-03-slot" data-full="0">10:30</button>
            <button class="d10-02-03-slot" data-full="1">11:00</button>
            <button class="d10-02-03-slot" data-full="0">11:30</button>
            <button class="d10-02-03-slot" data-full="1">13:00</button>
            <button class="d10-02-03-slot" data-full="0">13:30</button>
            <button class="d10-02-03-slot" data-full="0">14:00</button>
            <button class="d10-02-03-slot" data-full="1">14:30</button>
            <button class="d10-02-03-slot" data-full="0">15:00</button>
          </div>
        </div>

CSS

.d10-02-03-wrap{width:210px}
        .d10-02-03-title{font-size:12px;color:#64748b;margin-bottom:10px;text-align:center}
        .d10-02-03-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
        .d10-02-03-slot{padding:9px 0;border:1px solid #cbd5e1;background:#fff;border-radius:8px;font-size:12px;color:#334155;cursor:pointer;transition:.15s}
        .d10-02-03-slot:hover:not([data-full="1"]){border-color:#f59e0b;background:#fffbeb}
        .d10-02-03-slot[data-full="1"]{background:#f1f5f9;color:#cbd5e1;cursor:not-allowed;text-decoration:line-through}
        .d10-02-03-slot.d10-02-03-on{background:#f59e0b;border-color:#f59e0b;color:#fff;font-weight:700}

JavaScript

(function(){
        var wrap=document.querySelector('#item-10-02-03 .d10-02-03-wrap');
        if(!wrap)return;
        wrap.querySelectorAll('.d10-02-03-slot').forEach(function(b){
          b.addEventListener('click',function(){
            if(this.getAttribute('data-full')==='1')return;
            wrap.querySelectorAll('.d10-02-03-on').forEach(function(x){x.classList.remove('d10-02-03-on');});
            this.classList.add('d10-02-03-on');
          });
        });
      })();

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