在 Javascript 中使用模板文字

Question

所以我正在制作一個購物車，我正在動態添加產品，每個產品當然有多個元素，但我的問題在於刪除按鈕以及添加金額、刪除金額和項目數量。 其中每一個都有一個 class 但我無法選擇這些元素，因為我將它們注釋掉或從 HTML 中刪除它們。 那么有沒有辦法通過使用模板文字向它們添加類來獲取這些元素？

這是我的單品HTML：

<div class="cart-content">
  <!-- cart item -->
  <!-- <div class="cart-item">
    <img src="/img/higher-clouds.jpg" alt="product" srcset="" />
    <div>
      <h4>queen bed</h4>
      <h5>$9</h5>
      <span class="remove-item">Remove</span>
    </div>
    <div>
      <i class="fas fa-chevron-up"></i>
      <p class="item-amount">1</p>
      <i class="fas fa-chevron-down"></i>
    </div>
  </div> -->
  <!-- end of cart item -->
</div>

這是 javascript：

// add products to cart

const addBtns = document.getElementsByClassName("bag-btn");
for (let i = 0; i < addBtns.length; i++) {
  const btn = addBtns[i];
  btn.addEventListener("click", addToCart);
}

function addToCart(e) {
  const button = e.target;
  button.innerText = "In Cart";
  button.disabled = true;
  const title = button.parentElement.nextElementSibling.textContent;
  const price =
  button.parentElement.nextElementSibling.nextElementSibling.children[0].textContent;
  const img = button.parentElement.children[0].src;
  addItemToCart(title, price, img);
}

function addItemToCart(title, price, img) {
  const newRow = document.createElement("div");
  newRow.classList.add("cart-item");
  newRow.innerHTML = `
 <img src="${img}" alt="product" srcset="" />
  <div>
    <h4>${title}</h4>
    <h5>${price}</h5>
    <span class="remove-item">Remove</span>
  </div>
  <div>
    <i class="fas fa-chevron-up"></i>
    <p class="item-amount">1</p>
    <i class="fas fa-chevron-down"></i>
  </div>`;
  cartContent.append(newRow);
}

如何使用模板文字或任何其他方式將類（remove-item、fa-chevron-up、fa-chevron-down、item-amount）添加到它們的元素中？ 任何幫助，將不勝感激。

Answer 1

使用這種模式， attribute="${dynamicValue}"注意模板表達式周圍的引號（" "）。

  `<div>
    <i class="${dynamicString} ${dynamicString}"></i>
    <p class="${dynamicString}">1</p>
    <i class="${dynamicString}"></i>
  </div>`