如果购物车中没有商品，请隐藏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);
  }
});