パーツ番号 03-04-03 ・ JavaScript使用

通貨切替セレクタ

ボタンをクリックすると円・ドル・ユーロが切り替わり価格表示も連動して変化します。海外向けECサイトで多言語・多通貨プラグインの表示切替UIに応用できます。

i18nclickjs

プレビュー

ソースコード

HTML

<div class="d03-04-03-box">
          <div class="d03-04-03-price">¥1,980</div>
          <div class="d03-04-03-currency">
            <button class="d03-04-03-cur is-active" data-cur="¥" data-rate="1">JPY</button>
            <button class="d03-04-03-cur" data-cur="$" data-rate="0.0067">USD</button>
            <button class="d03-04-03-cur" data-cur="€" data-rate="0.0062">EUR</button>
          </div>
        </div>

CSS

.d03-04-03-box{text-align:center}
        .d03-04-03-price{font-size:30px;font-weight:800;color:#111827;margin-bottom:14px;font-variant-numeric:tabular-nums}
        .d03-04-03-currency{display:flex;gap:6px;justify-content:center}
        .d03-04-03-cur{padding:7px 14px;border:1px solid #d1d5db;border-radius:20px;background:#fff;
          color:#374151;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
        .d03-04-03-cur.is-active{background:#111827;color:#fff;border-color:#111827}

JavaScript

(function(){
        var root=document.querySelector('#item-03-04-03 .d03-04-03');
        var priceEl=root.querySelector('.d03-04-03-price');
        var base=1980;
        root.querySelectorAll('.d03-04-03-cur').forEach(function(btn){
          btn.addEventListener('click',function(){
            root.querySelectorAll('.d03-04-03-cur').forEach(function(b){b.classList.remove('is-active');});
            btn.classList.add('is-active');
            var rate=parseFloat(btn.getAttribute('data-rate'));
            var sym=btn.getAttribute('data-cur');
            var val=base*rate;
            var text=rate===1?Math.round(val).toLocaleString():val.toFixed(2);
            priceEl.textContent=sym+text;
          });
        });
      })();

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