質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

913閲覧

金額をカウントアップするselect optionをもう1つ追加しても合計金額と内訳がずれないようにしたい

yuhki

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/08/09 23:59

編集2020/08/10 08:58

カウントアップでselect optionをもう1つ追加しても合計金額と内訳がずれないようにしたいです。

※わからないというお声をいただいたので補足です。
optionsSetクラス内にある、数量<select class="num num1">をもう1つ同じく設置したいです。
以下でも設置自体はできているのですが、<p class="options1">のタイプチェックボックスを選択してから、select optionの選択していない内容を変更すると総額などの値がおかしくなります。

以下が基のソースです。

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <section class="cf"> <div class="optionsSet"> <p> 数量:<select class="num num1"> <option value="1" data-price="1,000">1個</option> <option value="2" data-price="2,000">2個</option> <option value="5" data-price="5,000">5個</option> <option value="10" data-price="10,000">10個</option> <option value="20" data-price="20,000">20個</option> </select> </p> <p class="options1"><label><input type="checkbox" value="1"> オプション1 <span class="optionPrice">2,000</span>円</label>  <label><input type="checkbox" value="1"> オプション2 <span class="optionPrice">4,500</span>円</label></p> </div> <div class="priceBox"> <dl class="price cf"><dt>基本価格</dt><dd><span class="basePrice basePrice1">1,000</span>円</dd></dl> <dl class="price cf"><dt>オプション価格</dt><dd><span class="optionTotal optionTotal1">0</span>円</dd></dl> <dl class="price cf"><dt>総額</dt><dd><span class="total total1">1,000</span>円</dd></dl> </div> </section> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ /*------------------------------- カウントアップ -------------------------------*/ /* 初期値の設定 */ var priceBase = removeFigure($(".basePrice1").text()); //基本価格を取得 var priceOptions = removeFigure($(".optionTotal").text()); //オプション合計を取得 var priceTotal = priceBase + priceOptions; //基本価格とオプション合計から総額を計算 var optionsPrice = 0; //加算するオプション価格の初期設定 var basePrice = priceBase; //数量変更後の基本価格を変更 $(".priceTotal").text(addFigure(priceTotal)); //総額を反映 $(".options1 :checkbox").click(function(){ optionsPrice = 0; //加算するオプション価格を初期化 $(".options1 :checkbox:checked").each(function(){ //指定された範囲の中にある、すべてのチェックされたチェックボックスと同じラベル内にある、.optionPriceのテキストを取得 optionsPrice = optionsPrice + removeFigure($(this).parent("label").find(".optionPrice").text()); }); var timerPrice = setInterval(function(){ if(priceOptions != optionsPrice){ //計算前と計算後の値が同じになるまで実行する if(priceOptions < optionsPrice){//元の数が計算後の数より大きいか小さいかを判定 priceOptions = priceOptions + Math.round((optionsPrice - priceOptions)/2); //値を反比例して加減する }else{ priceOptions = priceOptions - Math.round((priceOptions - optionsPrice)/2); } //算出されたオプション合計と総額をHTMLに反映 $(".optionTotal1").text(addFigure(priceOptions)); $(".total1").text(addFigure(priceBase + priceOptions)); }else{ clearInterval(timerPrice); } }, 17); }); $("select.num").change(function(){ //セレクトボックス内の選択されているoptionのdata-price属性を取得 basePrice = removeFigure($(this).find("option:selected").attr("data-price")); var timerPrice = setInterval(function(){ if(priceBase != basePrice){ if(priceBase < basePrice){ priceBase = priceBase + Math.round((basePrice - priceBase)/2); }else{ priceBase = priceBase - Math.round((priceBase - basePrice)/2); } //算出された基本価格と総額をHTMLに反映 $(".basePrice1").text(addFigure(priceBase + priceOptions)); $(".total1").text(addFigure(priceBase + priceOptions)); }else{ clearInterval(timerPrice); } }, 17); }); /*------------------------------- カンマ処理 -------------------------------*/ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function removeFigure(str) { var num = new String(str).replace(/,/g, ""); num = Number(num); return num; } }); </script> </body> </html>

以下が変更後のソースです。

<!doctype html> <html> <head> <meta charset="UTF-8"> </head> <body> <section class="cf"> <div class="optionsSet"> <p> 数量:<select class="num num1"> <option value="1" data-price="1,000">1個</option> <option value="2" data-price="2,000">2個</option> <option value="5" data-price="5,000">5個</option> <option value="10" data-price="10,000">10個</option> <option value="20" data-price="20,000">20個</option> </select> </p> <p> 数量:<select class="num0 num2"> <option value="1" data-price="1,000">1個</option> <option value="2" data-price="2,000">2個</option> <option value="5" data-price="5,000">5個</option> <option value="10" data-price="10,000">10個</option> <option value="20" data-price="20,000">20個</option> </select> </p> <p class="options1"> <label> <input type="checkbox" value="1"> オプション1 <span class="optionPrice">2,000</span>円 </label> <label> <input type="checkbox" value="1"> オプション2 <span class="optionPrice">4,500</span>円 </label> </p> <p class="options1"> <label> <input type="checkbox" value="1"> オプション3 <span class="optionPrice">14,500</span>円 </label> </p> </div> <div class="priceBox"> <dl class="price cf"><dt>基本価格</dt><dd><span class="basePrice basePrice1">1,000</span>円</dd></dl> <dl class="price cf"><dt>基本価格2</dt><dd><span class="basePrice0 basePrice2">1,000</span>円</dd></dl> <dl class="price cf"><dt>オプション価格</dt><dd><span class="optionTotal optionTotal1">0</span>円</dd></dl> <dl class="price cf"><dt>総額</dt><dd><span class="total total1">1,000</span>円</dd></dl> </div> </section> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function(){ /*------------------------------- カウントアップ -------------------------------*/ /* 初期値の設定 */ var priceBase = removeFigure($(".basePrice1").text()); //基本価格を取得 var priceBase2 = removeFigure($(".basePrice2").text()); //基本価格を取得 var priceOptions = removeFigure($(".optionTotal").text()); //オプション合計を取得 var priceOptions2 = removeFigure($(".optionTotal2").text()); //オプション合計を取得 var priceTotal = priceBase + priceBase2 + priceOptions + priceOptions2; //基本価格とオプション合計から総額を計算 var optionsPrice = 0; //加算するオプション価格の初期設定 var basePrice = priceBase; //数量変更後の基本価格を変更 var basePrice0 = priceBase2; //数量変更後の基本価格を変更 $(".priceTotal").text(addFigure(priceTotal)); //総額を反映 $(".options1 :checkbox").click(function(){ optionsPrice = 0; //加算するオプション価格を初期化 $(".options1 :checkbox:checked").each(function(){ //指定された範囲の中にある、すべてのチェックされたチェックボックスと同じラベル内にある、.optionPriceのテキストを取得 optionsPrice = optionsPrice + removeFigure($(this).parent("label").find(".optionPrice").text()); }); var timerPrice = setInterval(function(){ if(priceOptions != optionsPrice){ //計算前と計算後の値が同じになるまで実行する if(priceOptions < optionsPrice){//元の数が計算後の数より大きいか小さいかを判定 priceOptions = priceOptions + Math.round((optionsPrice - priceOptions)/2); //値を反比例して加減する }else{ priceOptions = priceOptions - Math.round((priceOptions - optionsPrice)/2); } //算出されたオプション合計と総額をHTMLに反映 $(".optionTotal1").text(addFigure(priceOptions)); $(".total1").text(addFigure(priceBase + priceBase2 + priceOptions)); }else{ clearInterval(timerPrice); } }, 17); }); $("select.num").change(function(){ //セレクトボックス内の選択されているoptionのdata-price属性を取得 basePrice = removeFigure($(this).find("option:selected").attr("data-price")); var timerPrice = setInterval(function(){ if(priceBase != basePrice){ if(priceBase < basePrice){ priceBase = priceBase + Math.round((basePrice - priceBase)/2); }else{ priceBase = priceBase - Math.round((priceBase - basePrice)/2); } //算出された基本価格と総額をHTMLに反映 $(".basePrice1").text(addFigure(priceBase + priceOptions)); $(".total1").text(addFigure(priceBase + priceBase2 + priceOptions2)); }else{ clearInterval(timerPrice); } }, 17); }); $("select.num0").change(function(){ //セレクトボックス内の選択されているoptionのdata-price属性を取得 basePrice0 = removeFigure($(this).find("option:selected").attr("data-price")); var timerPrice2 = setInterval(function(){ if(priceBase2 != basePrice0){ if(priceBase2 < basePrice0){ priceBase2 = priceBase2 + Math.round((basePrice0 - priceBase2)/2); }else{ priceBase2 = priceBase2 - Math.round((priceBase2 - basePrice0)/2); } //算出された基本価格と総額をHTMLに反映 $(".basePrice2").text(addFigure(priceBase2 + priceOptions2)); $(".total1").text(addFigure(priceBase + priceBase2 + priceOptions2)); }else{ clearInterval(timerPrice2); } }, 17); }); /*------------------------------- カンマ処理 -------------------------------*/ function addFigure(str) { var num = new String(str).replace(/,/g, ""); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } function removeFigure(str) { var num = new String(str).replace(/,/g, ""); num = Number(num); return num; } }); </script> </body> </html>

新たに設置した、select optionの影響か、基からあるselect optionの数値が、チェックボックスをチェックして外してを繰り返すと、金額がおかしくなることがあります…
jQuery初心者なもので、ご教授のほどお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/08/10 06:32

なにをどうしたいのかきちんと説明してください 「カウントアップ」しているようなプログラムには見えませんが
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問