如果购物车中没有商品，则隐藏 AJAX 购物车商品编号

Question

我正在努力使用一些javascript来找出使其工作的正确方法。

我有一个按钮显示购物车中的商品数量。默认情况下为零。随着商品添加到购物车中，数量正在增加。但是一开始，我不想在购物车中显示"0"。

.HTML：

<p id="cart_button" onclick="show_cart();">
<input type="button" id="total_items" value="0">
</p>
<div id="mycart"></div>
<div id="item_div">
<div class="items" id="item1">
<input type="button" value="Add To CART" onclick="cart('item1')">
<p>Simple Navy Blue T-Shirt</p>
<input type="hidden" id="item1_name" value="ITEM-ID1">
</div>
<div class="items" id="item2">
<input type="button" value="Add To CART" onclick="cart('item2')">
<p>Trendy T-Shirt With Back Design</p>
<input type="hidden" id="item2_name" value="ITEM-ID2">
</div>
</div>

JAVASCRIPT：

$(document).ready(function() {
$.ajax({
type: 'post',
url: 'store_items.php',
data: {
total_cart_items: "totalitems"
},
success: function(response) {
document.getElementById("total_items").value = response;
}
});
});
function cart(id) {
var name = document.getElementById(id + "_name").value;
$.ajax({
type: 'post',
url: 'store_items.php',
data: {
item_name: name
},
success: function(response) {
document.getElementById("total_items").value = response;
}
});
}
function show_cart() {
$.ajax({
type: 'post',
url: 'store_items.php',
data: {
showcart: "cart"
},
success: function(response) {
document.getElementById("mycart").innerHTML = response;
$("#mycart").slideToggle();
}
});
}

我基本上希望隐藏带有 0 的按钮，直到它获得值。 如果它回到零，我希望它再次被隐藏。 谢谢你的帮助！

Answer 1

您可以将"更改"事件侦听器添加到此按钮：

let totalItems = $('#total_items');
totalItems.change(function () {
if (totalItems.val() == 0) {
totalItems.hide();
}
else totalItems.show();
});

此外，您应该在 ajax 的成功方法中触发此事件：

success: function(response) {
document.getElementById("total_items").value = response;
totalItems.change();
}

最后在启动时隐藏此按钮：

<input type="button" id="total_items" value="0" style="display: none">

检查一下小提琴的工作： https://jsfiddle.net/xpvt214o/771844/

Answer 2

您可以在更新购物车时显示/隐藏：

// Add this function
function update_cart(value) {
document.getElementById("total_items").value = response;
if (value > 0) {
// Show the cart
document.getElementById("total_items").style.display = "block";
} else {
// Hide the cart
document.getElementById("total_items").style.display = "none";
}
}

然后，您需要在更新购物车时更改代码：

$.ajax({
type: 'post',
url: 'store_items.php',
data: {
total_cart_items: "totalitems"
},
success: function(response) {
update_cart(response);
}
});