http://vigrius.esy.es/pikabu/ лови
<?
$arCoffes = array(
"coffe1"=>"10",
"coffe2"=>"20",
"coffe3"=>"40",
"coffe4"=>"20",
"coffe5"=>"20",
"coffe6"=>"80",
"coffe7"=>"20",
"coffe8"=>"70",
);
?>
price 10P
<br>
<?foreach($arCoffes as $key=>$coffee):?>
<input class = "coffees" type = "hidden" value = <?=json_encode($arCoffes)?>>
<?=$key?> - <?=$coffee?>
<input data-coffee = <?=$key?> class = "counter" name = "<?=$coffee?>" value = 0>
<br>
<?endforeach?>
<div class = "all">
0
</div>
<div class = "price">
0
</div>
<script>
$(function(){
counter = new counter();
counter.init();
})
var counter = function()
{
var self = this;
self.values = {};
self.all = 0;
self.init = function()
{
self.coffes = JSON.parse($(".coffees").val());
$(".counter").each(function(){
var input = $(this);
var coffee = $(this).data("coffee");
var val = $(this).val();
self.values[coffee] = val;
recount();
})
$(".counter").off("input").on("input",function(){
var input = $(this);
var coffee = $(this).data("coffee");
var val = $(this).val();
var oldVal = self.values[coffee];
if(val == "")
{
self.values[coffee] = 0;
}
else
{
self.values[coffee] = val;
}
recount(oldVal,val,coffee);
})
}
function recount(oldValue,newValue,coffee)
{
var values = self.values;
if(oldValue)
{
var minus = oldValue*self.coffes[coffee];
self.all-=minus;
self.counter-=parseInt(oldValue);
var plus = newValue*self.coffes[coffee];
self.all+=plus;
self.counter+=parseInt(newValue);
}
else
{
var keys = Object.keys(self.values);
for(var i = 0 ;i<keys.length;i++)
{
var nowKey = keys[i];
var nowVal = self.values[nowKey];
var objem = self.coffes[nowKey];
var sum = nowVal*objem;
self.all+=sum;
}
self.counter = 0;
}
$(".all").html(self.all);
console.log(self.counter);
$(".price").html(self.counter*10);
}
}
ну это прикидка,можно и лучше написать и оптимизировать не пересчитывая все заново а только то что меняется и тд
а мб лучше использовать двумерный массив?)
когда мы знаем обьем мл а колличество штук пользователь сам вводит
только я не понимаю как внести в массив значение(шт) которое введет пользователь в поле input
<input type="hidden" id="cofe1" value="1.50">
<input type="hidden" id="cofe2" value="3.40">
<button onClick="jQuery('#N1').val(parseInt(jQuery('#N1').val())-1);jQuery('#N1').change();">-</button>
<input type="number" id="N1" value="0" placeholder="Колличество проданных шт">
<button onClick="jQuery('#N1').val(parseInt(jQuery('#N1').val())+1);jQuery('#N1').change();">+</button>
<br>
<button onClick="jQuery('#N2').val(parseInt(jQuery('#N2').val())-1);jQuery('#N2').change();">-</button>
<input type="number" id="N2" value="0" placeholder="Колличество проданных шт">
<button onClick="jQuery('#N2').val(parseInt(jQuery('#N2').val())+1);jQuery('#N2').change();">+</button>
<button onClick="raschitat();">Рассчитать стоимость</button>
<div id="vsegostuk"></div>
<div id="vsegoml"></div>
<div id="summaprod"></div>
<script type="text/javascript">
function raschitat() {
var a = parseInt(document.getElementById('N1').value);
var b = parseInt(document.getElementById('N2').value);
var c = a + b ;
document.getElementById('vsegostuk').innerHTML = a + " + " + b + " = " + c;
var cofe1 = parseFloat(document.getElementById('cofe1').value);
var cofe2 = parseFloat(document.getElementById('cofe2').value);
var itogoml = (cofe1 * a) + (cofe2 * b) ;
document.getElementById('vsegoml').innerHTML = "Вы израсходовали всего"+ itogoml +" мл";
summaprod = c * 10;
document.getElementById('summaprod').innerHTML = "Вы сегодня продали товаров на сумму "+ summaprod +" р";
}
</script>
Ну это не очень интересный метод т.к. таки не чистый, а используется JQuery селектор, но я бы так же сделал. Нахуй обычные селекторы, JQuery поиск да, с подстановкой числа в имя/id объекта и 100500 нумерованных. А вот на одинаковые id/name/etc надеяться не стоит и не стоит так делать.
<?for($i=1;$i<$countCofees;$i++):?>
<div class = "form_coffee">
<input class = "kol">
<input class = "objem">
</div>
<?endfor?>
<script>
$(function(){
$(".kol").off("input").on("input",function(){
recount();
})
$(".objem").off("input").on("input",function(){
recount();
})
})
function recount()
{
var all = 0;
$(".form_coffee").each(function(){
var form = $(this);
var kol = form.find(".kol");
var objem = form.find(".objem");
var summ = kol*objem;
all+=summ;
})
$(".itogo").val(all);
}
</script>
на костылях это выглядит сейчас так)
http://web-fox23.ru/calc/
а что если будет 1000 товаров
представляешь какая будет формула расчета длинная
