当数字<＆lt;时，徽章图标部分消失。 1

Question

我正在使用徽章图标来显示购物车项目的数量。当数字为1或更多时，它的效果很好，但如果购物车中没有任何物品，则它不显示零，而是一半消失。我已经发布了价值1+的截图，然后是购物车为空时的样子。此外，即使将商品添加到购物车后，徽章也不会弹出数字，直到刷新或在添加商品后转到下一页。

我想我可能需要添加更多脚本，但只是学习，不知道我会怎么做。

全面了解：这是一个BigCommerce网站，因此购物车信息由内部服务器生成。它由变量%% GLOBAL_CartItems %%（在下面的代码中）引用，通常显示为文本字符串，“View Cart ..”以及购物车中的项目总数。由于我只想要数字，我添加了仅用数值替换文本的脚本。我已经在下面包含了HTML和脚本。

购物车中有1件或更多件的样子：

购物车中没有商品的样子：

<li style="display:%%GLOBAL_HideCartOptions%%">
    <span><a href="%%GLOBAL_ShopPathNormal%%/cart.php" title="%%LNG_ViewCart%%"><i class="icon-large sprite-glyphicons_halflings_115_shopping-cart2x icon-2x" style="position: relative; top: 14px; right: 16px;"></i><span id='cart-items' class="badge badge-info" style="position: relative; top: 18px; right: 17px;">%%GLOBAL_CartItems%%</span></a></span>
</li>

<script type='text/javascript'>
   var $cart_items = $('#cart-items');
   $cart_items.text($cart_items.text().replace(/[^0-9]/g, ''));
</script>

徽章CSS：

.badge {
  padding: 1px 9px 2px;
  font-size: 10.998px;
  font-weight: bold;
  line-height: 14px;
  color: #ffffff;
  vertical-align: baseline;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}

Answer 1

将以下CSS添加到样式表文件中或将其添加到内联

.cart-items {
  display:block;
  min-width:25px;
}

Answer 2

我怀疑徽章图标的html（或至少它的css）导致其消失，因为它没有正确放在一起。发布代码示例，我们将尝试修复它。至于在刷新之前没有更新的号码，我的第一个问题是当买家把东西放在购物车中时你会捕捉到这个事件吗？那是更新数字的时候，比如说：

$("#cart").on('update', undefined, cart.NumberOfItems, updateBadgeIcon);

function updateBadgeIcon(event)
{
    var newNumber = event.Data;
    $('#badgeNumber').html(newNumber);
};

查看jQuery文档和jQuery on method。

Answer 3

找出我自己的问题的答案： 结果我错过了徽章的一些CSS：

    .badge:empty { 
        display: none; 
     }

猜猜我认为这已经在引导程序中......或者我错误地以某种方式将其删除，或者可能只是需要添加它。无论哪种方式，问题都解决了。