Fatal编程技术网
  • javascript/
  • 使用Javascript从DOM收集详细信息以添加到数组

使用Javascript从DOM收集详细信息以添加到数组

javascript jquery html css bootstrap-4

使用Javascript从DOM收集详细信息以添加到数组,javascript,jquery,html,css,bootstrap-4,Javascript,Jquery,Html,Css,Bootstrap 4,我正在尝试使用vanilla JavaScript或jQuery构建一个功能性购物车。我不确定我是否以正确的方式进行，但我试图做的是： 设置一个名为cartItems的数组，其中存储所有购物车数据（ID、价格、图像、描述、重量、税） 通过向“添加到购物车”按钮添加事件侦听器或通过ID获取button元素来填充此数组（我不确定的一件事是，当存在多个产品时，如何设置不同的侦听器，所有这些产品都需要遵循相同的过程才能添加到购物车） 将购物车数据添加到阵列后，我可以使用它填充购物车页面。购物车页面上有更

我正在尝试使用vanilla JavaScript或jQuery构建一个功能性购物车。我不确定我是否以正确的方式进行，但我试图做的是：

  • 设置一个名为cartItems的数组，其中存储所有购物车数据（ID、价格、图像、描述、重量、税）

  • 通过向“添加到购物车”按钮添加事件侦听器或通过ID获取button元素来填充此数组（我不确定的一件事是，当存在多个产品时，如何设置不同的侦听器，所有这些产品都需要遵循相同的过程才能添加到购物车）

  • 将购物车数据添加到阵列后，我可以使用它填充购物车页面。购物车页面上有更新数量和删除项目的选项。我可以使用对数组的编辑来进行这些更改

    • 目前最大的问题是第二部分。实际上，“等待”添加到购物车按钮并处理应处理的数据

    
**HTML**

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Weyland's | Shop</title>

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="index.html">Weyland's</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div id="navbarNavDropdown" class="navbar-collapse collapse">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
          <li class="nav-item"><a class="nav-link" href="shop.html">Shop</a></li>
          <li class="nav-item"><a class="nav-link" href="shipping.html">Shipping</a></li>
        </ul>

        <ul class="navbar-nav navbar-right">
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li class="nav-item"><a class="nav-link" href="login.html">Login</a></li>
          <li class="nav-item"><a class="nav-link" href="register.html">Register</a></li>
          <li>
            <div class="dropdown-divider"></div>
          </li>
          <li>
            <span class="navbar-text d-none d-sm-block"> | </span>
          </li>
          <li class="nav item"><a class="nav-link" href="#" id="cart">Cart <span id="itemsInCart"></span></a></li>
        </ul>
      </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col col-12 col-sm-12 col-md-6 col-lg-4 pt-5">
        <div class="card text-white bg-dark">
          <img class="card-img-top img-fluid" src="https://source.unsplash.com/9489sFfgk4c/1000x1000" alt="Card Image">
          <div class="card-body">
            <h4 class="card-title">St. Helen Chair</h4>
            <p class="card-subtitle text-muted">R1,999.00</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, amet!</p>
            <a href="st-helen-chair.html" class="btn btn-outline-light">Read More</a>
            <a href="#" id="atc-button" class="atc btn btn-primary float-right">Add to Cart</a>
          </div>
        </div>
      </div>

      <div class="col col-12 col-sm-12 col-md-6 col-lg-4 pt-5">
        <div class="card text-white bg-dark">
          <img class="card-img-top img-fluid" src="https://source.unsplash.com/0kjNpxQ6dPQ/1000x1000" alt="Card Image">
          <div class="card-body">
            <h4 class="card-title">Crane Neck Lamp</h4>
            <p class="card-subtitle text-muted">R499.00</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, amet!</p>
            <a href="crane-neck-lamp.html" class="btn btn-outline-light">Read More</a>
            <a href="#" id="atc-button" class="atc btn btn-primary float-right">Add to Cart</a>
          </div>
        </div>
      </div>

      <div class="col col-12 col-sm-12 col-md-6 col-lg-4 pt-5">
        <div class="card text-white bg-dark">
          <img class="card-img-top img-fluid" src="https://source.unsplash.com/qVg2lhK4sVY/1000x1000" alt="Card Image">
          <div class="card-body">
            <h4 class="card-title">His & Hers Mugs</h4>
            <p class="card-subtitle text-muted">R249.00</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, amet!</p>
            <a href="his-and-hers-mugs.html" class="btn btn-outline-light">Read More</a>
            <a href="#" class="atc btn btn-primary float-right">Add to Cart</a>
          </div>
        </div>
      </div>

      <div class="col col-12 col-sm-12 col-md-6 col-lg-4 pt-5">
        <div class="card text-white bg-dark">
          <img class="card-img-top img-fluid" src="https://source.unsplash.com/XwdSGEiOahM/1000x1000" alt="Card Image">
          <div class="card-body">
            <h4 class="card-title">Minimalistic Frame</h4>
            <p class="card-subtitle text-muted">R659.00</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, amet!</p>
            <a href="minimalistic-frame.html" class="btn btn-outline-light">Read More</a>
            <a href="#" class="atc btn btn-primary float-right">Add to Cart</a>
          </div>
        </div>
      </div>

      <div class="col col-12 col-sm-12 col-md-6 col-lg-4 pt-5">
        <div class="card text-white bg-dark">
          <img class="card-img-top img-fluid" src="https://source.unsplash.com/igKjieyjcko/1000x1000" alt="Card Image">
          <div class="card-body">
            <h4 class="card-title">City Crusier</h4>
            <p class="card-subtitle text-muted">R8,999.00</p>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, amet!</p>
            <a href="city-cruiser.html" class="btn btn-outline-light">Read More</a>
            <a href="#" class="atc btn btn-primary float-right">Add to Cart</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="shopScripting.js"></script>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
    我知道我的JavaScript文件不完整，结构不正确。我正试图从一开始就学会如何最好地做到这一点。我希望，当单击“添加到购物车”按钮时，会捕获相应的产品详细信息并将其添加到阵列中。

    因此，首先，您可能会将目录作为数据存储或其他内容。接下来，您将需要一些东西来唯一地标识产品（也许您所称的
    id
    可能是
    sku
    ？），这样，我们可以执行以下操作：

    // I do this, to turn a NodeList into a true Array
const addToCartBtns = [...document.querySelectorAll(".atc-button")];

addToCartBtns.forEach(button => {
  /***
   * Here, you have the `button` instance, which would handle its
   *   own clicks and updates.
   */
  button.addEventListener("click", function(){
    const productSKU = button.getAttribute('data-product-id');
    // With the id/sku, we can then filter the data store, or
    //   query for the relevant row. We don't need to push all
    //   that onto the cart, though - all we really need is a
    //   sku and quantity. We only need product and price when
    //   we display, and that's all in our data store!
    cartItems.push({
      sku: productSKU,
      qty: 1 /* a default quantity to start */
    });
    // Also at this point, you'd want to notify the user
    //   that you've updated the cart, maybe update the
    //   display or take them to the cart to allow qty
    //   updates or whatever.
  }); 
});
    你出售的每件商品都有一个SKU（如果它们没有，你需要开始使用它们）。因此，用该SKU（
    …
    ）标记您的项目，对于每个SKU，一个按钮添加其自己的父项，或查询它知道需要查询的SKU（使用
    document.querySelector（`[data SKU=“${SKU}”“]”）
    ）将为您提供“东西”然而，实际上，你根本不需要HTML元素。您只想将SKU添加到您的项目数组中，并进行计数，如
    {“1874-2-613947”：2}
    ，然后您可以根据自己的喜好构建购物车页面。谢谢您的评论。这一逻辑在我的头脑中确实有效，比我的方法更有意义。我只有两个问题：1。关于productSKU，我是否需要在单个按钮级别设置数据产品id？（我只有五种产品，所以这并不难。我只是不确定该变量来自何处。2.一旦产品SKU和数量被推送到数组中，它们如何与其他数据“合并”（对不起，这听起来可能很愚蠢）。它们如何与产品名称、价格等匹配？基于数据产品id？再次感谢！我会在按钮本身上放置一个
    数据产品id
    ，是的（就像
    …
    。一旦创建了仅包含该id和数量的购物车数组，您是否有某种数据存储？产品数据数组或其他什么？我知道这不是一种好的做法，但目前所有内容都是在我的HTML中硬编码的（有五种产品，设置为卡片）还有，我在你的按钮上发现了一个错误。addEventListener行。知道为什么吗？这是说它不是一个函数。当然。有一个混乱-我的选择器是
    。atc按钮
    ，但是你给了他们所有的
    id=atc按钮
    ，这是你实际上无法做到的。id必须是唯一的。看看这里：-数组可能不是popu除非您为每个按钮指定了数据产品id，否则为空。 
    
**JavaScript/jQuery**

let cartItems = [];

function cartProduct(id,product,price,weight,vat) {
  this.id = id;
  this.product = product;
  this.price = price;
  this.weight = weight;
  this.vat = vat;
}

function addToCart() {
  cartItems = JSON.parse(sessionStorage.getItem("cartItems"));
  let newProduct = new cartProduct
  document.getElementById('atc-button')
}

    // I do this, to turn a NodeList into a true Array
const addToCartBtns = [...document.querySelectorAll(".atc-button")];

addToCartBtns.forEach(button => {
  /***
   * Here, you have the `button` instance, which would handle its
   *   own clicks and updates.
   */
  button.addEventListener("click", function(){
    const productSKU = button.getAttribute('data-product-id');
    // With the id/sku, we can then filter the data store, or
    //   query for the relevant row. We don't need to push all
    //   that onto the cart, though - all we really need is a
    //   sku and quantity. We only need product and price when
    //   we display, and that's all in our data store!
    cartItems.push({
      sku: productSKU,
      qty: 1 /* a default quantity to start */
    });
    // Also at this point, you'd want to notify the user
    //   that you've updated the cart, maybe update the
    //   display or take them to the cart to allow qty
    //   updates or whatever.
  }); 
});