在 Javascript 中使用模板文字答案

【问题标题】：Using template literals in Javascript在 Javascript 中使用模板文字
【发布时间】：2021-05-05 15:56:01
【问题描述】：

所以我正在制作一个购物车并动态添加产品，当然每个产品都有多个元素，但我的问题在于删除按钮以及添加金额、删除金额和商品数量。其中每一个都有一个类，但我无法选择这些元素，因为我正在将它们注释掉或从 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）添加到它们的元素中？任何帮助将不胜感激。

【问题讨论】：

您可以使用element.classList.add 向元素添加类。
我这样做并将类（'cart-item'）添加到我创建的新 div 中。但是 div 中还有更多元素，我可以创建它们并在添加它们的类时将它们附加到 div 吗？ @AbrarHossain
document.createElement() 可能是您正在寻找的东西，如果您无法构建足够细粒度的模板字符串..但您也可以有像 "
$ 这样的位文字中的 {text123}
" 和 extra123 可以为空或包含“ class='一二三'”。 TBH：我仍然不清楚您的确切问题和/或期望的结果是什么。
@flowtron 问题是我无法抓取这些元素，因为我是用 JS 动态添加它们的，所以我从 HTML 中删除了它们。期望的结果是，在创建 div 之后，我可以在其中添加更多元素，例如 remove 和 quantity 元素并向它们添加类，以便我可以选择它们并添加事件侦听器。
我必须使用 createElement() 创建所有这些元素，向它们添加类并将它们附加到 div 还是有其他方法？

标签： javascript html template-literals

【解决方案1】：

使用这种模式， attribute="${dynamicValue}" 注意模板表达式周围的引号(" ")。

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

【讨论】：

所以我可以使用这样的模板文字添加类... ?
是的，当然。
我实际上是在开发工具中看到，当创建新的 div 时，所有元素都已经在里面并且它们有自己的类，所以我不需要做任何事情大声笑但是感谢这个信息，以后会派上用场的。 @RahulDahal