function cart() {
var oneGoodCount, oneGoodPrice, allGoodCount, allGoodPrice, target, changer;
changer = $('.cart_good_count_changer');
target = $('.ordered');
oneGoodCount = 0;
oneGoodPrice = 0;
allGoodCount = 0;
allGoodPrice = 0;
changer.children(".minus").on("click", function(){
var curVal = parseInt($(this).parent().children('input').val());
if(curVal<=0) {
curVal = 0;
return false;
}
$(this).parent().children('input').val(parseInt(curVal-1));
$(this).closest(".custom_form").find("input").each(function(i){
oneGoodCount = oneGoodCount + parseInt($(this).val());
if(parseInt($(this).val()) > 0) {
oneGoodPrice = oneGoodPrice + parseInt($(this).val()) * parseInt($(this).data('price'));
}
console.log(oneGoodCount);
console.log(oneGoodPrice);
});
$(this).closest("tr").find(".cart_one_good_count").text(oneGoodCount);
$(this).closest("tr").find(".cart_one_good_price").text(oneGoodPrice);
oneGoodCount = 0;
oneGoodPrice = 0;
$('.cart_one_good_count').each(function(){
allGoodCount = allGoodCount+parseInt($(this).html());
});
$(".cart_one_good_price").each(function(){
allGoodPrice = allGoodPrice+parseInt($(this).html());
});
target.find('.cart_all_good_count').html(allGoodCount);
target.find('.cart_all_good_price').html(allGoodPrice);
$("[name=cart_all_good_count]").val(allGoodCount);
$("[name=cart_all_good_price]").val(allGoodPrice);
allGoodCount = 0;
allGoodPrice = 0;
});
changer.children(".plus").on("click", function(){
var curVal = parseInt($(this).parent().children('input').val());
$(this).parent().children('input').val(parseInt(curVal+1));
$(this).closest(".custom_form").find("input").each(function(i){
oneGoodCount = oneGoodCount + parseInt($(this).val());
if(parseInt($(this).val()) > 0) {
oneGoodPrice = oneGoodPrice + parseInt($(this).val()) * parseInt($(this).data('price'));
}
console.log(oneGoodCount);
console.log(oneGoodPrice);
});
$(this).closest("tr").find(".cart_one_good_count").text(oneGoodCount);
$(this).closest("tr").find(".cart_one_good_price").text(oneGoodPrice);
oneGoodCount = 0;
oneGoodPrice = 0;
$('.cart_one_good_count').each(function(){
allGoodCount = allGoodCount+parseInt($(this).html());
});
$(".cart_one_good_price").each(function(){
allGoodPrice = allGoodPrice+parseInt($(this).html());
});
target.find('.cart_all_good_count').html(allGoodCount);
target.find('.cart_all_good_price').html(allGoodPrice);
$("[name=cart_all_good_count]").val(allGoodCount);
$("[name=cart_all_good_price]").val(allGoodPrice);
allGoodCount = 0;
allGoodPrice = 0;
});
$('.button_clear_cart').on("click", function(){
var removedCount = $(".cart_table_check input:checked").closest("tr").find(".cart_one_good_count").html();
var removedPrice = $(".cart_table_check input:checked").closest("tr").find(".cart_one_good_price").html();
var allCount = target.find('.cart_all_good_count').html();
var allPrice = target.find('.cart_all_good_price').html();
target.find('.cart_all_good_count').html(parseInt(allCount - removedCount));
target.find('.cart_all_good_price').html(parseInt(allPrice - removedPrice));
$(".cart_table_check input:checked").closest("tr").remove();
});
}
Верстка
<table class="cart_table">
<thead>
<tr>
<th></th>
<th>Наименование и количество товара</th>
<th>Сумма</th>
</tr>
</thead>
<tbody>
<tr>
<td class="cart_table_check">
<input type="checkbox" class="cart_good" id="check1">
<label class="custom_checkbox" for="check1"></label>
</td>
<td>
<div class="cart_good_detail">
<div class="img">
<img src="img/good.png">
</div>
<div class="custom">
<div class="custom_title">английский флаг</div>
<div class="custom_form">
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
</div>
</div>
</div>
</td>
<td class="cart_table_price">
<span class="cart_one_good_count">0</span> чехлов<br/> на <em><span class="cart_one_good_price">0</span> рублей</em>
</td>
</tr>
<tr>
<td class="cart_table_check">
<input type="checkbox" class="cart_good" id="check2">
<label class="custom_checkbox" for="check2"></label>
</td>
<td>
<div class="cart_good_detail">
<div class="img">
<img src="img/good.png">
</div>
<div class="custom">
<div class="custom_title">английский флаг</div>
<div class="custom_form">
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
<div class="custom_form_field right">
<label>
<em>IPhone 4</em>
<span class="cart_good_count_changer">
<input type="text" class="cart_good_count" data-price="100" name="" disabled="disabled" value="0">
<span class="minus"></span>
<span class="plus"></span>
</span>
</label>
</div>
</div>
</div>
</div>
</td>
<td class="cart_table_price">
<span class="cart_one_good_count">0</span> чехлов<br/> на <em><span class="cart_one_good_price">0</span> рублей</em>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="ordered">
Итого <span class="cart_all_good_count">0</span> чехлов на сумму: <strong><span class="cart_all_good_price">0</span> рублей</strong>
<input type="hidden" name="cart_all_good_count">
<input type="hidden" name="cart_all_good_price">
</td>
</tr>
</tfoot>
</table>
