Question

我有一个购物车图标，上面有另一个图标，该图标可以计算购物车中有多少物品。这是代码

CSS：

.fa-stack[data-contador]:after{
 position:absolute;
  right:-10%;
  top:-25%;
  content: attr(data-contador);
  font-size:70%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

HTML

<span class="fa-stack fa-1x has-badge" data-contador="MY NUMBER">
   <i class="fas fa-shopping-cart fa-2x"></i>
</span>

我正在使用来自codeigniter的购物车库，并获得了以下信息：

<span class="fa-stack fa-1x has-badge" data-cantidad='<?= $this->cart->total_items(); ?>'>
  <i class="fas fa-shopping-cart fa-2x"></i>
</span>

$ this-> cart-> total_items（）;返回商品数量

那行得通，但是仅当我刷新页面时，我的问题是如何在不刷新页面的情况下更新该值。谢谢

Answer 1

希望您仅将此用于GUI目的，因为不信任客户端。话虽这么说：

控制器：

function get_cart_items() {
    echo json_encode(array('item_count' => $this->cart->total_items()));
    exit();
}

JS：

//<span class="fa-stack fa-1x has-badge" id="cart-count" data-cantidad='<?= $this->cart->total_items(); ?>'>
$('.cart-add').on('click', function (e) {
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'path/to/get_cart_items',
        dataType: 'json',
        success: function (data) {
            $('#cart-count').attr('data-cantidad', data.item_count);
        }
    });
});

注意：cart-add是要添加到触发新总计（或向购物车中添加商品）的任何按钮的 class 。 cart-count是要使用data-cantidad属性添加到span / div的 id 。

您显然必须在需要此js的任何页面上包含此js，并事先加载jquery。

如何在不刷新页面的情况下更新HTML data- *属性

1 个答案: