カウントアップで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初心者なもので、ご教授のほどお願いします。
あなたの回答
tips
プレビュー