时间戳

首页 > 解决方案 > 链接两个元素，存储它们，并将它们发送到删除函数 - 纯 Javascript

javascript - 链接两个元素，存储它们，并将它们发送到删除函数 - 纯 Javascript

问题描述

我有一个演示购物车功能的纯 Javascript 原型。

我有一个 Button 将项目添加到购物车（并切换到 ON 状态），然后有一个 Card 代表购物车中的项目。

到目前为止，我已经工作了；

但是，我无法弄清楚如何链接 Button 和新创建的项目卡，因此我可以：

https://codepen.io/rhysyg03/pen/PdyyWE

您的帮助将不胜感激。

仅供参考 - 这只是一个演示，所以它不需要是生产就绪代码。

谢谢你。

const shoppingCartEl = document.querySelector('#js-shopping-cart');
const addToCartButton = document.querySelector('#js-add-to-cart');
var buttonToggle = false;
var itemOneData = {
    name:'Shoes',
    price:"$105.00"
}

function addItem(button, itemData) {
  console.log("ADD");
  // var itemEl = createElement('<div class="item-card"></div>');
  const itemEl = document.createElement("div");
  itemEl.classList.add("item-card");
  itemEl.innerHTML = itemData.name + itemData.price + "<button id='js-item-cart-remove'>Remove</button>";
  shoppingCartEl.appendChild(itemEl);
  const itemCardRemove = document.querySelector('#js-item-cart-remove');
  itemCardRemove.addEventListener('click', () => {
    removeItem();
  })
}

function removeItem() {
  console.log("REMOVE");
  // how to do this part
}

addToCartButton.addEventListener('click', () => {
    if (buttonToggle == false) {
      addItem(addToCartButton, itemOneData);
      buttonToggle = true;
      addToCartButton.innerHTML = "Remove from Cart";
    } else {
      // How to do this part
      removeItem();
      buttonToggle = false;
      addToCartButton.innerHTML = "Add to Cart";
    }
})

标签： javascript

解决方案

（对不起，我有点累了，你应该先看最后的结尾）

你应该有这样的项目：

var itemOneData = {
    id: 1,
    name:'Shoes',
    price:"$105.00"
}

var itemTwoData = {
    id: 2,
    name:'Shoes',
    price:"$105.00"
}

然后你应该在项目卡元素上存储标识符：

...
itemEl.classList.add("item-card");
itemEl.setAttribute("data-item-id", itemData.id)
...

在此之后，当单击删除按钮时，您应该：

  1. 获取id要删除的项目itemEl.getAttribute("data-item-id")
  2. 传递id删除功能removeItem(id)
  3. （这是我放弃的地方）找到属性为“data-item-id”的项目，id并将其替换为空字符串“”

还有另一种解决方案，可能要简单得多：单击删除按钮时，只需找到它的父项并将其替换为空字符串。

推荐阅读