jQueryで計算シミュレーターを作る

シェアする

スポンサーリンク

※2017年11月30日に追記しました

少し前に仕事で作ったものですが、それなりに汎用性が高いので紹介させていただきます

クリエイターズシップさんの見積作成ページのように選択項目から選ぶと料金を計算して表示するといった感じです
単一選択と複数選択がある想定です

各種ファイル

JSファイル

HTMLファイル

CSSファイル

解説

簡単な概要

HTMLでボタンとなるタグ(なんでもいいです)にdata属性で「price」を持たせてそれを元に計算します
「data-price=”10000″」とかの部分ですね

単一選択の設定(HTML)

  • コンテナに「.radiocontainer」を設定します
  • ボタンとなるタグには「.radio」を設定します

複数選択の設定(HTML)

  • コンテナに「.checkcontainer」を設定します
  • ボタンとなるタグには「.check」を設定します

計算結果表示の設定(HTML)

  • コンテナに「.calc」を設定します
  • 表示するタグには「.result」を設定します

JS解説

まず計算用の変数を作成しておきます、なんとなく単一と複数で分けました

単一選択のタグがクリックされた際の部分です
まずクリックされた時に兄弟要素にチェックされている項目がないかどうかの判定をするのですが、Bootstrapを使っていると兄弟要素にボタンがいることは稀なんじゃないかなと思います
そこでコンテナになっている「.radiocontainer」の出番です

closest([expr])

jQuery 1.3より。

開始要素から最も近い親要素を選択します。引数にセレクター書式を指定した場合、マッチする最も近い親要素を返します。
フィルタにマッチすれば、開始要素そのものが返る場合もあります。
ルートドキュメントまで辿ってもマッチする要素が無い場合、戻り値はnoneになります。

closestは、特にイベント操作で便利です。

jQuery日本語リファレンスより引用

で1度コンテナまで戻ります、その後

で兄弟要素に「.checked」が無いかどうかを探しに行きます
これだと例えば

とかなっても大丈夫です
あとはチェックされていれば

で再計算し、最初のチェックなら

単純に足し算して「.checked」を設定して終わりです

複数選択の処理はもっと簡単で

「.checked」が付いているものをクリックしたら引き算、付いていなければ足し算します

でチェックの処理をして完了です

双方どちらの処理でも

で「.result」に計算結果を表示します
表示するタグがdivとかだったら「.html」だけで、テキストボックスなら「.val」だけで大丈夫です

まとめ

長々書きましたけど処理自体は単純なものです
そのまま使ってもいいですしカスタマイズもしやすいんじゃないかなと思います

計算シミュレーター作る機会もそんなに無いと思いますがご参考まで∠( ゚д゚)/

追記

2017年11月30日
これだけだとスマホやタブレット環境のタップに反応しないので、こちらのサイトを参考に少し修正しました

スポンサーリンク

シェアする

フォローする

スポンサーリンク