jQuery 购物车商品数量和总价计算
jQuery Cart Item quantity and total price calculation
我正在尝试创建购物车。我有 2 件购物车商品,想要 increase/decrease 数量和按钮计算 subtotal/total 价格。
当我增加第一项的数量时,我在小计中得到 NaN。
var price = parseFloat($('#price').text());
$('#subtract').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
if ( current > 0 ) {
$qty.val(current-1);
$('#subtotal').val(price*(current-1));
} else {
$('#subtotal').val(0);
}
});
$('#add').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
$qty.val(current+1);
$('#subtotal').val(price*(current+1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="cart">
<td class="pt-3">
<img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
<div class="title pb-2">Margarhitta</div>
<div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
</td>
<td class="text-center">
<span class="price" id="price"><strong>.99</strong></span>
</td>
<td class="text-center">
<input class="sub text-right" style="width:20px;" type="button" name="subtract" id="subtract" value="-" ></input>
<input type="text" name="qty" id="qty" value="0" class="qty" disabled></input>
<input class="add text-left" style="width: 20px;" type="button" name="add" id="add" value="+"></input>
</td>
<td class="text-center">
<input type="text" name="subtotal" id="subtotal" value="0" class="subtotal" disabled></input>
</td>
<td>
<a href="javascript:void(0)" class="remove" ><i class="icofont-trash"></i></a>
</td>
</tbody>
</table>
<input type="text" class="float-right " style="color: white;" name="total" id="total" value="0" class="total" disabled></input>
那是你解析不成功
您的代码需要这个:
parseFloat($('#price').text().replace("$",""));
我正在尝试创建购物车。我有 2 件购物车商品,想要 increase/decrease 数量和按钮计算 subtotal/total 价格。
当我增加第一项的数量时,我在小计中得到 NaN。
var price = parseFloat($('#price').text());
$('#subtract').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
if ( current > 0 ) {
$qty.val(current-1);
$('#subtotal').val(price*(current-1));
} else {
$('#subtotal').val(0);
}
});
$('#add').on("click",function() {
var $qty = $('#qty');
var current = parseInt($qty.val());
$qty.val(current+1);
$('#subtotal').val(price*(current+1));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr class="cart">
<td class="pt-3">
<img class="img-fluid rounded-pill float-left col-md-3 " src="{{asset('front/')}}/assets/img/1.png" alt="">
<div class="title pb-2">Margarhitta</div>
<div class="description" >Lorem ipsum sajdhasdhashd sajdhasdhashd sajdhasdhashd</div>
</td>
<td class="text-center">
<span class="price" id="price"><strong>.99</strong></span>
</td>
<td class="text-center">
<input class="sub text-right" style="width:20px;" type="button" name="subtract" id="subtract" value="-" ></input>
<input type="text" name="qty" id="qty" value="0" class="qty" disabled></input>
<input class="add text-left" style="width: 20px;" type="button" name="add" id="add" value="+"></input>
</td>
<td class="text-center">
<input type="text" name="subtotal" id="subtotal" value="0" class="subtotal" disabled></input>
</td>
<td>
<a href="javascript:void(0)" class="remove" ><i class="icofont-trash"></i></a>
</td>
</tbody>
</table>
<input type="text" class="float-right " style="color: white;" name="total" id="total" value="0" class="total" disabled></input>
那是你解析不成功
您的代码需要这个:
parseFloat($('#price').text().replace("$",""));