Pantela,
не знаю что вы хотите сделать, но c в строке 3 всегда true, это обьект с данными. лучше ориентироватся на класс и тогда var f = $(".report", e); //инпут в блоке if(f.length){ //если точно есть инпут с таким классом var c = f.data(); //все дата из этого инпут //... } |
спс. большой, вот только баг один...
Думаю как заглушку прописать... Если очень быстро нажимать на checkbox, иногда выводиться результат с 0 значением http://prntscr.com/fdwxs7 Часто встречал такую проблему у себя... |
Pantela,
добавьте stop в анимацию $(d[0]).stop().fadeOut(300, function() { $(d[1]).stop().fadeIn(300) }); |
В форме создал поле
<input type="hidden" name="cities" value="" />как через запятую записать те значение стран которые выбераю... т.е. должно быть напр. <input type="hidden" name="cities" value="russia,usa" /> спс.Ув. :( |
Pantela,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .row.sale .reportPrice{ text-decoration:line-through; color:#dd5a43; font-weight: normal; } .row.sale .reportPriceDiscount,.reportPrice{ color:#69aa46; font-weight: bold; } .reportPriceDiscount{ color:#ccc; } .row.ok.sale .reportPriceDiscount:after,.row.ok .reportPrice:after{ content:"✓"; margin-left:5px; font-size:12px; font-weight:bold; } .row.ok.sale .reportPrice:after{ content:""; } #finalPriceBlock{ display:none; font-weight:700; font-size:18px; } #orderCalcBalanceBlockAlert{ display:none; } #finalPrice{ color:hsla(120,100%,25%,1); } #finalPrice.red { color:hsla(0,100%,50%,1); } #allPrice{ color: hsla(240, 100%, 50%, 1); } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $(".row .report").on("change", function() { var a = 0, //общая сумма b = +$("#balance").val() || 0,//балланс k = 0,//сумма без скидки country = []; $(".row").each(function(d, e) { var f = $(".report", e), //инпут в блоке c = f.data(), //все дата из этого инпут b = c.discountwith.split(",")[c.discountrule](function(a) { return $(".row [name='" + a + "']").is(":checked") }); //скидка (true/false) -- не путать с баллансом $(e).toggleClass("sale", b);//установка-удаление класса блок со скидкой $(e).toggleClass("ok", f[0].checked);// установка-удаление класса блок выбран a += f[0].checked ? b ? +c.pricediscount : +c.price : 0; //подсчёт суммы с текущими скидками //если чекед плюсуем к общей сумме цену инпут со скидкой (b=true, c.pricediscount) или без (b=false, c.price) f[0].checked && (k += +c.price,country.push(f[0].name) ); //подсчёт суммы без скидок , добавление страны }); //вывод сумм и блоков предуреждения $("#finalPrice").text(a).css("opacity", 0).fadeTo(900, 1).toggleClass("red",a > b); $("#allPrice").text(k); var d = ["#finalPriceBlock", "#orderBlockAlert"]; a && d.reverse(); $(d[0]).stop().fadeOut(300, function() { $(d[1]).stop().fadeIn(300) }); $("#orderCalcBalanceBlockAlert")[a > b ? "fadeIn" : "fadeOut"](); $("[name='cities']").val(country); //вывод выбранных стран }).eq(0).change() }); </script> </head> <body> <div id="usa" class="row"> <div class="reportPrice">5 USD</div> <div class="reportPriceDiscount"><span>4 USD</span></div> Usa <input type="checkbox" name="usa" class="report" data-price="5" data-pricediscount="4" data-discountrule="some" data-discountwith="russia"/> </div> <br/ > <div id="russia" class="row"> <div class="reportPrice">7 USD</div> <div class="reportPriceDiscount"><span>5 USD</span></div> Russia <input type="checkbox" name="russia" class="report" data-price="7" data-pricediscount="5" data-discountrule="some" data-discountwith="usa"/> </div> <br/ > <div id="spane" class="row"> <div class="reportPrice">12 USD</div> <div class="reportPriceDiscount"><span>9 USD</span></div> Spane <input type="checkbox" name="spane" class="report" data-price="12" data-pricediscount="9" data-discountrule="every" data-discountwith="usa,russia"/> </div> <br/ > <div id="japan" class="row"> <div class="reportPrice">7 USD</div> <div class="reportPriceDiscount"><span>5 USD</span></div> Japan <input type="checkbox" name="japan" class="report" data-price="7" data-pricediscount="5" data-discountrule="some" data-discountwith="china,korea"/> </div> <br/ > <div id="china" class="row"> <div class="reportPrice">9 USD</div> <div class="reportPriceDiscount"><span>3 USD</span></div> China <input type="checkbox" name="china" class="report" data-price="9" data-pricediscount="3" data-discountrule="some" data-discountwith="japan,korea"/> </div> <br/ > <div id="korea" class="row"> <div class="reportPrice">8 USD</div> <div class="reportPriceDiscount"><span>4 USD</span></div> Korea <input type="checkbox" name="korea" class="report" data-price="8" data-pricediscount="4" data-discountrule="some" data-discountwith="japan,china"/> </div> <br/ > <!-- Final price --> <div id="finalPriceBlock"> <div class="col-md-12 center"> <div class="form-group"> Total price: <span id="finalPrice"></span> USD </div> <div class="form-group"> All price: <span id="allPrice"></span> USD </div> </div> </div> <!-- Final price --> <!-- Alert --> <div class="col-md-6 col-md-offset-3 col-xs-12"> <div class="form-group" id="orderBlockAlert"> Status: Warning </div> <div class="form-group" id="orderCalcBalanceBlockAlert"> Status: Danger </div> </div> <!-- Alert --> <br/ ><br/ > Balance: <input name="balance" id="balance" type="text" value="15" /> <input type="text" name="cities" value="" /> </body> </html> |
Часовой пояс GMT +3, время: 07:17. |