パーツ番号 10-07-05 ・ JavaScript使用
複数人予約人数セレクター
大人/子供の人数をボタンで増減させると合計金額が連動更新される。ツアーや飲食店の人数指定予約フォームに使える。
プレビュー
ソースコード
HTML
<div class="d10-07-05-wrap">
<div class="d10-07-05-row">
<div class="d10-07-05-info"><strong>大人</strong><span>13歳以上</span></div>
<div class="d10-07-05-ctrl">
<button type="button" class="d10-07-05-minus" data-target="adult">−</button>
<span class="d10-07-05-count" data-role="adult">2</span>
<button type="button" class="d10-07-05-plus" data-target="adult">+</button>
</div>
</div>
<div class="d10-07-05-row">
<div class="d10-07-05-info"><strong>子供</strong><span>4〜12歳</span></div>
<div class="d10-07-05-ctrl">
<button type="button" class="d10-07-05-minus" data-target="child">−</button>
<span class="d10-07-05-count" data-role="child">0</span>
<button type="button" class="d10-07-05-plus" data-target="child">+</button>
</div>
</div>
<div class="d10-07-05-total">合計金額 <b class="d10-07-05-price">¥8,400</b></div>
</div>CSS
.d10-07-05-wrap{width:100%;max-width:260px;}
.d10-07-05-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;}
.d10-07-05-info{display:flex;flex-direction:column;font-size:12px;color:#333;}
.d10-07-05-info span{font-size:10px;color:#999;}
.d10-07-05-ctrl{display:flex;align-items:center;gap:8px;}
.d10-07-05-ctrl button{width:24px;height:24px;border-radius:50%;border:1px solid #ccc;background:#fff;cursor:pointer;font-size:14px;line-height:1;color:#444;}
.d10-07-05-ctrl button:hover{border-color:#2f6fed;color:#2f6fed;}
.d10-07-05-count{width:18px;text-align:center;font-size:13px;font-weight:600;}
.d10-07-05-total{margin-top:12px;font-size:12px;color:#555;display:flex;justify-content:space-between;}
.d10-07-05-price{color:#e0562f;font-size:15px;}JavaScript
(function(){
var root = document.querySelector('.d10-07-05');
var counts = { adult: 2, child: 0 };
var priceMap = { adult: 4200, child: 2100 };
var priceEl = root.querySelector('.d10-07-05-price');
function render(){
root.querySelector('[data-role="adult"]').textContent = counts.adult;
root.querySelector('[data-role="child"]').textContent = counts.child;
var total = counts.adult * priceMap.adult + counts.child * priceMap.child;
priceEl.textContent = '¥' + total.toLocaleString();
}
root.querySelectorAll('.d10-07-05-plus').forEach(function(btn){
btn.addEventListener('click', function(){
var t = btn.getAttribute('data-target');
if(counts[t] < 9) counts[t]++;
render();
});
});
root.querySelectorAll('.d10-07-05-minus').forEach(function(btn){
btn.addEventListener('click', function(){
var t = btn.getAttribute('data-target');
var min = (t === 'adult') ? 1 : 0;
if(counts[t] > min) counts[t]--;
render();
});
});
})();クラス名 .d10-07-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。