如何在不重新加载页面的情况下添加 class

Question

我需要带有 ping 动画的购物车图标，当超过 0 个项目可用时，它显示购物车 ping，当购物车为空时，它显示正常的购物车图标我得到了我想要的，但问题是它只在用户重新加载页面有没有办法在不重新加载页面的情况下添加 class
https://prnt.sc/1x1r2ih https://prnt.sc/1x1r04l

<span class="lnr lnr-cart"></span> <span class="Header__CartCount hotiya"></span> {% if cart.item_count !=0 %}<div class="cart_ping"></div>{% 
endif %}

{
                key: "_rerenderCart",
                value: function(e) {
                    var t = this,
                        n = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartDot")),
                        i = a["default"].nodeListToArray(document.querySelectorAll(".Header__CartCount"));
                    return n.forEach(function(e) {
                        0 === t.itemCount ? e.classList.remove("is-visible") : e.classList.add("is-visible")
                    }), i.forEach(function(e) {
                        e.textContent = t.itemCount
                    }), fetch("/cart?view=" + (this.options.drawer ? "drawer" : "ajax") + "&timestamp=" + Date.now(), {
                        credentials: "same-origin",
                        method: "GET"
                    }).then(function(n) {
                        if (t.options.drawer && e) {
                            var i = new TimelineLite({
                                onComplete: function() {
                                    n.text().then(function(e) {
                                        t._replaceContent(e)
                                    })
                                }
                            });
                            i.to(e, .5, {
                                height: 0,
                                opacity: 0,
                                ease: Cubic.easeOut
                            }, 0), 0 === t.itemCount && i.to(t.element.querySelector(".Drawer__Footer"), .5, {
                                y: "100%",
                                transition: "none",
                                ease: Cubic.easeInOut
                            }, 0)
                        } else n.text().then(function(e) {
                            t._replaceContent(e)
                        })
                    })
                }

Answer 1

我认为 {% if cart.item_count !=0 %} 是问题所在的部分。即使值发生变化，页面也不会重新呈现。相反，试试这个：

<span class="lnr lnr-cart"></span> <span class="Header__CartCount hotiya"></span> <div id="cart_ping" class="cart_ping"></div>

if(cartItems.Count > 0)
{
   document.getElementById('cart_ping').style.display = "block";
}
else
{
  document.getElementById('cart_ping').style.display = "none";
}

javascript 代码进入 ajax 输出。

Answer 2

在添加购物车成功 API 调用时，需要将购物车动画更改为 ping。如下所示：

cart.classList.add("ping");

如果有人从购物车中移除商品，需要在移除成功事件中移除该商品 class，如下所示：

cart.classList.remove("ping");

注意：确保“ping”CSS class 显示购物车上的圆点图标。

如何在不重新加载页面的情况下添加 class

how to add class without reloading page

javascript

ajax

jquery

shopify