あらためて書くような内容でもないんでしょうが、Javascriptを用いて、金額の3桁区切りのカンマと末尾の「円」の表記を削除する処理をしたので、その備忘録。
実際はHTMLの中に書いてある金額を取得して、hiddenタグに挿入してsubmitする仕組み。
商品がいくつか並んでいるので、あるボタンを押したら、その商品の金額からカンマと末尾の円を削除してあげる必要がありました。
知ってる人にとっては、ほんと今さらなネタなんでしょうけどね。
目次
金額を取得する
まずは単純に金額を取得するサンプルです。
<dl id="price-box">
<dt>金額</dt>
<dd>10,000円</dd>
</dl>
<button type="button">取得</button>
$(function(){
$('button').on('click', function() {
var price;
price = $('#price-box dd').text();
});
});
これで金額を取得できますね。
3桁区切りのカンマを取る
priceには『10,000円』が入ってくるので、ここからカンマを取り除きます。
こちらを参考にして
price_nocomma = price.split(",").join("");
これで、カンマを取り除くことが出来ました。
前半の『price.split(“,”)』で、カンマで分割しておいて、後半の『.join(“”)』で、連結して一つの文字列にしています。
末尾の「円」を取る
カンマがとれたので、price_nocommaには『10000円』が入っています。
ここでは
price_data = price_nocomma.slice(0, -1);
と書いて『円』を取り除きます。
price_nocommaの『末尾の（円）を消す』というよりは、『0番目から最後の一つ前の文字（円の前）まで取得する』ということですね。
まとめ
出来上がったコードは
$(function(){
$('button').on('click', function() {
var price;
var price_nocomma;
var price_data;
price = $('#price-box dd').text();
price_nocomma = price.split(",").join("");
price_data = price_nocomma.slice(0, -1);
});
});
これで、金額から桁区切りのカンマと、単位（円）を削除した数値を取り出すことが出来ました。
でも実はこの部分はたいして問題はなかったんですが、一番はまってたのは最初に値を取るところでした。
サンプルでは簡単にしていますが、実際は親子要素があるので、『parent()』や『children()』なんか使ってて、階層が全然つかめないで四苦八苦してました。
実際使うかわからないけど、こういったものを関数化して自分なりに蓄積していけば、後々楽になりそうですね。
WordPressにでも書き溜めていこうかな。
そいぎ～。
