【发布时间】：2021-03-11 09:47:08
【问题描述】：
我正在尝试创建一个类似购物车的功能，该功能显示在数据库中找到的产品，用户可以选择每种产品的数量，然后将其添加到购物车中。我目前面临的问题是，当用户点击加号按钮时，所有数量都会发生变化，它们都会显示点击的总价。 这是我的代码：
$('.plus').bind('click', function(e) {
$('.minus').prop('disabled', false)
var quantity = parseInt($('.quantity').val());
if (!isNaN(quantity) && quantity < 8) {
$('.quantity').val(quantity + 1);
} else if (quantity == 8) {
$('.quantity').val(9);
$(this).prop('disabled', true)
}
var price = parseFloat($('.price').text()).toFixed(2);
if (quantity != 9) {
if ((price * quantity) % 1 !== 0) {
$(".total_price").val(parseFloat(price * (quantity + 1)) + ".00");
} else {
$(".total_price").val(parseFloat(price * (quantity + 1)) + "0");
}
$(".total_price").css("font-weight", "Bold");
$(".total_price").css("color", "brown");
} else {
if ((price * quantity) % 1 !== 0) {
$(".total_price").val(parseFloat(price * 9) + ".00");
} else {
$(".total_price").val(parseFloat(price * 9) + "0");
}
$(".total_price").css("font-weight", "Bold");
$(".total_price").css("color", "brown");
}
});
$('.minus').bind('click', function(e) {
$('.plus').prop('disabled', false)
var quantity = parseInt($('.quantity').val());
if (!isNaN(quantity) && quantity > 1) {
$('.quantity').val(quantity - 1);
} else {
$(this).prop('disabled', true)
$('.quantity').val(0);
}
var price = parseFloat($('.price').text()).toFixed(2);
if ((price * quantity) % 1 !== 0) {
$(".total_price").val(parseFloat(price * (quantity - 1)) + ".00");
} else {
$(".total_price").val(parseFloat(price * (quantity - 1)) + "0");
}
if (quantity != 1) {
$(".total_price").css("font-weight", "Bold");
$(".total_price").css("color", "brown");
} else {
$(".total_price").css("font-weight", "normal");
$(".total_price").css("color", "black");
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row' id='product_item'>
<div class='col-5' style='margin: auto;'>
<input class='product_name' readonly type='text' name='product_name' style='display: inline; width:100%; border:white;' value='".$row[' productName ']."'>
</div>
<div class='col-1' style='margin: auto;'>
<div class='price' style='display: inline;'>".$row['price']."</div>€</div>
<div class='col-3' style='display:inline; margin: auto;'>
<div class='input_group_button'>
<button class='btn plus' type='button'>
<img src='img/plus.png'>
</button>
</div>
<input class='input_group_field quantity' readonly type='number' name='quantity' value='0' max=9>
<div class='input_group_button'>
<button class='btn minus' type='button'>
<img src='img/minus.png'>
</button>
</div>
</div>
<div class='col-2' style='margin: auto;'><input class='total_price' readonly type='number' name='total_price' style='display: inline; width:65%; border:white;' value='0.00'>€</div>
<div class='col-1'>
<button class='btn' type='button' id='add_cart'>
<img src='img/add-to-cart.png'>
</button>
</div>
</div>感谢我能得到的任何帮助！
【问题讨论】：
-
制作结构良好的标记，您可以使用它来依赖元素的顺序。然后使用
event对象传递给handler函数，从event.target获取点击的元素，并使用HTML结构遍历想要的元素，如target.prev()、target.parent().prev等得到想要处理的元素。
标签： javascript html jquery class