如何在不重新加載頁面的情況下添加類

我需要帶有 ping 影片的購物車圖示，當有 0 個以上的商品可用時，它會顯示購物車 ping，當購物車為空時，它會顯示普通的購物車圖示 我得到了我想要的東西，但問題是它僅在用戶重新加載頁面時才有效有什么方法可以在不重新加載頁面的情況下添加類
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)
                        })
                    })
                }

uj5u.com熱心網友回復：

在添加購物車成功 API 呼叫上，需要將購物車影片更改為 ping。像下面這樣：

cart.classList.add("ping");

如果有人從購物車中洗掉了該專案，則需要在 remove 成功事件中洗掉該類，如下所示：

cart.classList.remove("ping");

注意：確保“ping”CSS 類在購物車上顯示該點圖示。

uj5u.com熱心網友回復：

我認為{% 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 輸出中。

標籤：javascript 查询 阿贾克斯 购物

上一篇：在瀏覽器中使用canvasapi將svg轉換為png時，svg中的嵌入影像在Safari中隨機空白

下一篇：等待最后一個ajax請求在復雜鏈中決議