Question

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

我有一个按钮，用于将商品添加到购物车（并切换到“开启”状态），然后有一个Card代表购物车中的商品。

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

将数据添加到购物车按钮✓
将数据从Button发送到购物车并创建新的商品卡✓

但是，我不知道如何将Button和新创建的物品卡链接在一起，所以我可以：

移除物品卡，然后将按钮切换为“关闭”或
将按钮切换为OFF并删除正确的物品卡

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";
    }
})

Answer 1

（对不起，我有点累了，首先应该阅读结尾部分）

您应该有这样的物品：

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)
...

此后，单击“删除”按钮时，您应该：

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

还有另一种解决方案，可能不太复杂：单击“删除”按钮时，只需找到它的父级并用空字符串替换即可。

Answer 2

这是一个快速的解决方案，只是为了获得您想要的东西，但是，当然，也许您应该在某个“状态”中放置购物车物品，并根据该状态呈现UI。在这种快速解决方案中，我正在做的是事件委托，因为我们知道一开始将存在的一个元素是cart div。因此，我们将事件放置在此元素上，然后检查单击的元素，并进行一些检查，以便仅确保可以删除项目卡片。 codepen.io/anon/pen/WgaYxe?editors=1011

希望这会有所帮助，如果您需要更多详细信息，请随时提问！再见

链接两个元素，存储它们，然后发送它们以删除功能-纯Javascript

2 个答案: