Все же не понял почему 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 |
| Часовой пояс GMT +3, время: 15:07. |