← 動的パーツギャラリーへ戻る

パーツ番号 05-02-12 ・ JavaScript使用

通貨切替料金表

JPY/USDのボタンで料金表記が切り替わります。海外向けにも展開するWordPressサービスサイトの料金ページに便利です。

jsoverlay

プレビュー

ソースコード

HTML

<div class="d05-02-12-wrap">
          <div class="d05-02-12-cur">
            <button type="button" class="d05-02-12-c is-on" data-cur="jpy">¥ JPY</button>
            <button type="button" class="d05-02-12-c" data-cur="usd">$ USD</button>
          </div>
          <div class="d05-02-12-tbl">
            <div class="d05-02-12-col"><div class="d05-02-12-n">フリー</div><div class="d05-02-12-p" data-jpy="0" data-usd="0">¥0</div></div>
            <div class="d05-02-12-col"><div class="d05-02-12-n">スタンダード</div><div class="d05-02-12-p" data-jpy="980" data-usd="7">¥980</div></div>
            <div class="d05-02-12-col"><div class="d05-02-12-n">プロ</div><div class="d05-02-12-p" data-jpy="2980" data-usd="20">¥2,980</div></div>
          </div>
        </div>

CSS

.d05-02-12-wrap{width:100%;max-width:280px}
        .d05-02-12-cur{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
        .d05-02-12-c{border:1px solid #e5e7eb;background:#fff;border-radius:999px;padding:6px 16px;font-size:11px;font-weight:700;color:#6b7280;cursor:pointer;transition:.2s}
        .d05-02-12-c.is-on{background:#6366f1;color:#fff;border-color:#6366f1}
        .d05-02-12-tbl{display:flex;gap:8px}
        .d05-02-12-col{flex:1;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px 6px}
        .d05-02-12-n{font-size:11px;color:#6b7280;margin-bottom:6px}
        .d05-02-12-p{font-size:16px;font-weight:800;color:#6366f1;transition:opacity .25s}

JavaScript

(function(){
        var root=document.querySelector('#item-05-02-12 .d05-02-12-wrap');if(!root)return;
        var btns=root.querySelectorAll('.d05-02-12-c'),prices=root.querySelectorAll('.d05-02-12-p');
        function fmt(cur,v){return cur==='jpy'?('¥'+Number(v).toLocaleString('ja-JP')):('$'+v);}
        btns.forEach(function(b){
          b.addEventListener('click',function(){
            btns.forEach(function(x){x.classList.remove('is-on');});
            b.classList.add('is-on');
            var cur=b.dataset.cur;
            prices.forEach(function(p){p.textContent=fmt(cur,p.dataset[cur]);});
          });
        });
      })();

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