javascript - 如何将已删除项目按钮添加到我的购物车？

问题描述

我目前正在接受 Web 开发人员的培训，目前正在从事电子商务网站项目。我取得了不错的进展，但我发现自己面临一个问题，“删除文章”按钮。我尝试了几种方法，但都没有成功，我希望当点击我的按钮时，文章会从本地存储以及我的购物车页面中删除。这是我的代码：

if (productLocalStorage === null) {
  panierVide.innerHTML = '<p class="text-center">Le panier est vide !</p>';
  //sinon
} else {
  const table = document.getElementById("cart-tablebody"); //récupétation de l'élément qui contiendra nos articles

  productLocalStorage.forEach((element) => {
    // pour chaque éléments de mon local Storage
    let ligne = document.createElement("tr"); //Création d'une balise 'tr'

    ligne.innerHTML =
      //ces balises contiendront :
      `
            <td class="productName">${element.name}</td>
            <td>${element.color}</td>
            <td><input type="number" id="quantity" min="1" value="${element.quantity}"></td>
            <td class="prix">${element.price}</td>  
            <button id="sup" onclick="deleteProductEventHandler('${element.name}')">Supprimer</button>
            `;
    table.appendChild(ligne); // ajout de nos balises 'tr' à notre élément 'table'

    prixCalculer.push(element.price); //Envoie les prix de nos articles au tableau "prixCalculer"
  });
}

标签： javascripthtmlcss

这是您的用例的一个小解决方案。如果您正在学习，最好回顾一下开发设计模式。

function ShopingCard(node) {
  const tbody = node.querySelector('tbody');
  
  function load() {
    const rawData = localStorage.getItem('products');
    if (rawData) {
      JSON.parse(rawData).reduce(createProductRow, tbody);
    }
  }
  
  function createProductRow(container, row) {
    const tr = document.createElement('tr');
    const name = document.createElement('td');
    const price = document.createElement('td');
    const action = document.createElement('td');

    const button = document.createElement('button');


    name.innerText = row.name;
    price.innerText = row.price;
    button.innerText = 'Delete';

    button.onclick = function () {
      tr.remove();
      remove(row.name);
    }

    tr.appendChild(name);
    tr.appendChild(price);
    tr.appendChild(action);
    action.appendChild(button);
    container.appendChild(tr);
    
    return container;
  }
  
  function remove(productName) {
    const rawData = localStorage.getItem('products');
    if (!rawData) { return; }
    const products =  JSON.parse(rawData);
    // you may want to filter by id
    localStorage.setItem('products', JSON.stringify(products.filter(product => {
      return product.name !== productName;
    })));
  }
  
  function add(data) {
    let products = [];
    const rawData = localStorage.getItem('products');
    
    if (rawData) {
      products = JSON.parse(rawData);
    }
    
    createProductRow(tbody, data);
    products.push(data);
    localStorage.setItem('products', JSON.stringify(products));
  }
  
  load();
  return {
    add
  }
}
localStorage.setItem('products', JSON.stringify([{
  name: 'Product A',
  price: 14
}, {
  name: 'Product B',
  price: 16
}, {
  name: 'Product C',
  price: 17
}]));
const card = ShopingCard(document.querySelector('table'));

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <table>
    <thead>
      <tr>
        <td>Name</td>
        <td>Price</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      
    </tbody>
  </table>
</body>
</html>

javascript - 如何将已删除项目按钮添加到我的购物车？

问题描述

解决方案

推荐阅读