28.05.2017, 00:05
|
|
Аспирант
|
|
Регистрация: 25.05.2017
Сообщений: 31
|
|
Все же не понял почему 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
По работе, к сожалению пока без бюджета, сам что смог сделал, и отписал. Тут практический у меня массив надо в в формуле учитывать... |
|
28.05.2017, 00:20
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Pantela
|
|
Тут практический у меня массив надо в в формуле учитывать...
|
не понял
по id -- если что-то повторяется для это есть класс.
в вашем случае по id ничего не найти, о чём и говорит ваша цитата: stops searching after the ID is found in the DOM. поиск будет остановлен, если произошло обнаружение id (то есть getElementById найдёт только первый элемент) |
|
28.05.2017, 00:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Pantela
|
|
ID is absolutely the fastest
|
абсолютная скорость будет, только при уникальности id. |
|
28.05.2017, 01:22
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
калькулятор сложнозависимая скидка
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>
Последний раз редактировалось рони, 30.05.2017 в 21:04.
|
|
28.05.2017, 02:19
|
|
Аспирант
|
|
Регистрация: 25.05.2017
Сообщений: 31
|
|
Отлично спасибо большое... Интегрирую в проект и подправлю мелочи под себя...
Про id и class перечитаю.
P.S. наверное отпечатка там у тебя " every", а у меня " all", хотя странно всё равно всё работает  )) |
|
28.05.2017, 03:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Pantela
|
|
P.S. наверное отпечатка там у тебя "every", а у меня "all",
|
там всё верно.
хорошая идея сократить код !!! убрать all и one
P.S. убрал!!!
Последний раз редактировалось рони, 28.05.2017 в 04:02.
|
|
28.05.2017, 15:15
|
|
Аспирант
|
|
Регистрация: 25.05.2017
Сообщений: 31
|
|
спс, но немного пока не понимаю как ты без all и one, всё это соорудил...
Как я понял:
// 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 сторону переделать? (понимаю немного сложный вопрос, смотря какие руки, но всё же, может совет дадите)
И реально большое спасибо!!!
Последний раз редактировалось Pantela, 28.05.2017 в 16:29.
|
|
28.05.2017, 17:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Pantela
|
|
вывести сумму без скидки
|
добавил All price переменная k |
|
29.05.2017, 00:14
|
|
Аспирант
|
|
Регистрация: 25.05.2017
Сообщений: 31
|
|
Что бы мне понять как вы использовали some и every
Можно ссылку на туториял? Напр. оно...?
https://stackoverflow.com/questions/...every-and-some
Я не упрямый, но вот для теста заменил reportPrice и reportPriceDiscount с id на class, и всё работает...
Просто опять же, через классы я строю CSS стили + по мимо этих классов у меня и другие имеються, теперь боюсь что бы друг-другу не мешали бы когда обращение будет через JS
Остальное всё отлично, спасибо. 
+ Ещё может быть так что только название у меня будет без блоков и поля, т.е. так:
<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, 29.05.2017 в 01:01.
|
|
29.05.2017, 01:05
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Pantela,
всё что нужно знать и понимать в первых двух строках по ссылке, every вернёт true, если все checked, some вернёт true при первом checked из массива инутов.
остальное ваше сообщение не понимаю. https://learn.javascript.ru/array-iteration#every-some
|
|
|
|
