根據子元素的數量在圖標之間切換

Question

我想出了如何在添加更多元素時更改圖標，但我不知道如何在購物車為空時將其返回到原始圖標。

Javascript

let cartItems = document.getElementsByClassName('cart-container')[0];

if (cartItems.childElementCount <= 1) {
    let cartBtn = document.getElementsByClassName('cart-btn')[0]
    cartBtn.innerHTML = `
    <i class="fa fa-cart-plus cart-btn text-danger"></i>`
}

HTML

<h1 class="cart-btn">
  <i class="fa fa-shopping-cart"></i>
</h1>

<div class="container cart-container d-flex flex-column pb-5">
  <div class="row mt-5 mb-4">
    <div class="col">
    </div>
  </div>
</div>

Answer 1

我在導航欄上有一個購物車按鈕，我需要根據購物車是否為空在不同狀態之間切換。 我想出了如何在將商品添加到購物車時將其更改為一種狀態，但在清空購物車時如何將其更改回原始狀態的方法。 但是，我使用此代碼來完成該任務。

Javascript

function checkNavBtn() {
    let cartItems = document.getElementsByClassName('cart-container')[0];
    let cartBtn = document.getElementsByClassName('fa-shopping-cart')[0];
    if (cartItems.childElementCount >= 0) {
        cartBtn.classList.add('fa-cart-plus', 'text-danger');
    } if (cartItems.childElementCount <= 0) {
        cartBtn.classList.remove('fa-cart-plus', 'text-danger');
    }
}