Доделать оформление заказа со скидкой
Готово
|
:help: :help: :help:
|
Pantela,
на всякий случай, id это уникальный идентификатор! |
Ну в DIV да, что бы определить блок страны.
А в input нет, что бы определить с каких поле брать data параметры + соответственно передать в серверную часть. |
Цитата:
Для таких целей лучше использовать классы. или селектор выбора по атрибуту. |
Pantela,
сейчас <div id="spane" class="row"> <div id="reportPrice">12 USD</div> <div id="reportPriceDiscount"><span>9 USD</span></div> Spane <input type="checkbox" name="spane" id="report" data-price="12" data-pricediscount="9" data-discountrule="all" data-discountwith="usa,russia"/> </div> а лучше так <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="all" data-discountwith="usa,russia"/> </div> |
рони,
Цитата:
|
Dilettante_Pro,
да верно ... заменил на класс |
Я наоборот для тех елементов которые должны обрабатываться в JS я спецально их через id пишу, т.к. легче их потом в HTML найти, когда не удобно через напр. class="top no-padding .... ... ... ... ..." + классы часто возможно меняю из-за верстки CSS, потом всё кривиться...
Ну и почему лучще class использовать чем id. Задачу помогите решить... |
Pantela,
и верстка и поиск проще по классу, если всё однотипное, тут id ни в одном месте не нужно. Цитата:
может вам в раздел работа? |
Все же не понял почему id тут плох. Я привёл аргументы со своей точки зрения... Если и вас есть или наводку где можно конкретно ознакомиться был поблагодарён.
А так вот что пишут... ID is absolutely the fastest. Part of the reason is that ID is supposed to be unique, so the API stops searching after the ID is found in the DOM.Если скорость смотреть, тога вот https://jsperf.com/jquery-selector-speed-tests/98 По работе, к сожалению пока без бюджета, сам что смог сделал, и отписал. Тут практический у меня массив надо в в формуле учитывать... |
Цитата:
по id -- если что-то повторяется для это есть класс. в вашем случае по id ничего не найти, о чём и говорит ваша цитата: stops searching after the ID is found in the DOM. поиск будет остановлен, если произошло обнаружение id (то есть getElementById найдёт только первый элемент) |
Цитата:
|
калькулятор сложнозависимая скидка
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;//сумма без скидки
$(".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); //подсчёт суммы без скидок
});
//вывод сумм и блоков предуреждения
$("#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"]()
}).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" />
</body>
</html>
|
Отлично спасибо большое... Интегрирую в проект и подправлю мелочи под себя...
Про id и class перечитаю. P.S. наверное отпечатка там у тебя "every", а у меня "all", хотя странно всё равно всё работает :write: )) |
Цитата:
хорошая идея сократить код !!! убрать all и one P.S. убрал!!! |
спс, но немного пока не понимаю как ты без all и one, всё это соорудил... :write:
Как я понял: // a - нулевой отсчёт для определённых ценн и их сумм сложения // b - определённые количество стран // e - определённые блоки // f - определённые input // c - определённые data парамаметры // b - определённые основной и скидочной цены (true/false) Я понимаю что, что-то тут происходит...
b = c.discountwith.split(",")[c.discountrule](function(a) {
return $(".row [name='" + a + "']").is(":checked")
});
+ Хотелось бы ещё вывести сумму без скидки (ну что бы потом пользователю смог бы вывести разницу) И ещё, мне просто на стороне PHP и БД потом надо это тоже собрать, поэтому я думал через доп. значения сделать, тоже думаю, как хранить это что бы, потом вытащить легко и правильно... Спасибо большое попробую сам разобраться... - возможно что из-за этого, придётся и JS сторону переделать? (понимаю немного сложный вопрос, смотря какие руки, но всё же, может совет дадите) И реально большое спасибо!!! |
Цитата:
|
Что бы мне понять как вы использовали some и every
Можно ссылку на туториял? Напр. оно...? https://stackoverflow.com/questions/...every-and-some Я не упрямый, но вот для теста заменил reportPrice и reportPriceDiscount с id на class, и всё работает... Просто опять же, через классы я строю CSS стили + по мимо этих классов у меня и другие имеються, теперь боюсь что бы друг-другу не мешали бы когда обращение будет через JS Остальное всё отлично, спасибо. :thanks: :thanks: :thanks: + Ещё может быть так что только название у меня будет без блоков и поля, т.е. так:
<div id="russia" class="row">
Russia
</div>
Делаю так верно ?:
var f = $(".report", e), //инпут в блоке
c = f.data(); //все дата из этого инпут
if(c){
var 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); //подсчёт суммы без скидок
}
});
|
Pantela,
всё что нужно знать и понимать в первых двух строках по ссылке, every вернёт true, если все checked, some вернёт true при первом checked из массива инутов. остальное ваше сообщение не понимаю. https://learn.javascript.ru/array-iteration#every-some |
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:16. |