jQueryで
・数値にカンマ(コンマ)をつけて、金額表示に変更
・カンマ(コンマ)区切りの金額表示を数値に変更して計算に利用する
・makeshopで[PRICE]/[TAXPRICE]を使用した部分の金額取得方法
をまとめました。
デモはこちら
デモはできるだけ楽になるようにコーディングしてるのでソースでみると要素にidがついてません。jsでidの連番を振ってるのでF12でも確認してもらった方がいいかもしれません。
jQuery関連記事
【jQuery】pdfが存在するか、mimeタイプのバリデーションする
jQuery UIのsortableを使ってリストをドラッグで並び替える
jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する
HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる
bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種
bxSliderの使い方と、オプションでのカスタマイズ方法
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる
1.金額表示を数値に変更
HTML
<p><span class="money" id="price1">1,234,567,890</span>円</p> <p><span class="money2" id="result1"></span>円</p>
JavaScript
var price1 = $("#price1").html().replace(/,/g,""); $("#result1").html(price1);
金額部分を取得するとカンマ(コンマ)が入っているので、文字列として扱われてしまうので.replace()でカンマ(コンマ)を全て消すだけで完了です!
phpでは型変更とかしなきゃいけないですけど、jsは必要ないんで楽ですね!
※.html()で取得した値は文字列で取得してくるので、足し算をするときはparseInt()で数値に変更して下さい。変更しない場合「+」演算子を使うと当然、文字列結合となります。他の演算子なら自動で数値に変更してくれます。
2.数値を金額表示に変更
HTML
<p><span class="money" id="price2">1234567890</span>円</p> <p><span class="money2" id="result2"></span>円</p>
JavaScript
var price2 = $("#price2").html(); //string price2 = price2 * 10; //number price2 = String(price2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); //string $("#result2").html(price2);
金額の計算をした後表示するときによく使います。
正規表現を使っているので、型に注意です!
上で書いたように、.html()で取得した値は文字列で取得します。
その後計算すると型は数値になります。
それからカンマ(コンマ)をつけるために正規表現を使うので型を文字列にしないといけません。
計算しなければ型を気にしなくていいですが、なんのために金額を取得するのか考えたらほとんど計算することになると思います。
3.金額表示に消費税を追加する
HTML
<p><span class="money" id="price3">1,000,000</span>円</p> <p><span class="money2" id="result3"></span>円</p>
JavaScript
var price3 = $("#price3").html().replace(/,/g,""); price3 = String(Math.round(price3 * 1.08)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'); $("#result3").html(price3);
1と2を合わせて短くしただけですね。
4.makeshopの金額表示に数値に変更する
このまとめを書くきっかけになったmakeshop(メイクショップ)での話。
メイクショップで[PRICE]/[TAXPRICE]の独自タグを使うとその商品の、設定金額/税込金額を自動で表示してくれる独自タグがある。
それが厄介で金額だけなら使いやすいのだが、inputタグなど余計なものまでついてくる。(下のhtmlの<span class=”money”>内にあるもの)
ここから金額部分だけを抽出して計算するための金額取得方法。
HTML
<p><span class="money">¥100,200<input type="hidden" name="taxview"> <script language="javascript"> function numberFormat(num) { return num.toString().replace(/([\d]+?)(?=(?:\d{3})+$)/g, function (t) { return t + ','; }); } function updateOptionPrice() { updateOptionPriceAjax(xxx, function (option_stock) { if (document.form1.price1) { document.form1.price1.value = numberFormat(option_stock.no_tax_price); } if (document.form1.price2) { document.form1.price2.value = numberFormat(option_stock.price); } if (document.form1.taxview) { document.form1.taxview.value = numberFormat(option_stock.tax); } if (document.getElementById("M_point") && option_stock.point >= 0) { document.getElementById("M_point").innerHTML = numberFormat(option_stock.point); } if (document.getElementById("gmo_point_value")) { document.getElementById("gmo_point_value").innerHTML = Math.floor(option_stock.price * 0.01); } if (option_stock.quantity == "0") { alert("該当商品のオプションは品切れです。他の商品を選択してください。"); document.form1.spcode.focus(); } }); } </script> <input type="hidden" name="taxview" value=""> </span>円</p> <p><span class="money2"></span>円</p>
JavaScript
<script> var price4 = $("#price4").html(); price4 = price4.substring(1, price4.indexOf("<input", 0)); price4 = price4.replace(/,/g, ""); $("#result4").html(price4); </script>
今回は決まったパターンのhtmlだったので.substring()で
開始位置(¥マークを切るため、1)と
終了位置(<inputの出現位置を.indexOf()で取得)
を指定し切り取る方法を取っています。
見た目を変える必要はないのでその点では楽ですが、もう少しscriptタグの入れ方を考えてほしいですね!
コメント