Question

我正在尝试使用JS实现一个简单的购物车。

$('.addToCart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  cart.addProduct(name, price, 1);
});

这是我的购物车对象

var cart = (function () {
  cartStorage = [];

  function Product(name, price, count) {
    this.name = name;
    this.price = price;
    this.count = count;
  }
  var object = {};
  object.addProduct = function (name, price, count) {
    for (var i in cartStorage) {
      if (cartStorage[i].name == object.name) {
        cartStorage[i].count++;
        return;
      }
    }
    var newItem = Product(name, price, count);
    console.log(newItem);
    cartStorage.push(newItem);
  }

当我尝试对其进行控制台记录时，它会显示 undefined 。如果我再单击一次按钮，它会显示“无法读取属性”名称”。

这是我典型的物品卡片块

            <div class="col-8 col-md-4 col-lg-3 card">
                <img src="https://picsum.photos/200?random=9">
                <div class="priceWrapper">
                    <input type="button" value="BUY" class = "addToCart" data-name = "Product #8" data-price = "0.001">
                    <p class="newPrice">0.001$ </p>
                    <p class="oldPrice"><strike>300$</strike></p>
                </div>
                <p class="item-name">Product #8 </p>
            </div>

Answer 1

尝试一下

var newItem = new Product(name, price, count);

将关键字new用于对象构造函数中的新对象。

Answer 2

您正在执行此操作：var object = {}，几行后，正在执行此操作：object.name。

当然，您会得到一个错误...我不知道您要做什么，但是您必须先初始化该对象才能访问它的任何属性...

另一方面，给变量“对象”命名并不是一个好主意，请尝试为变量赋予更有意义的名称。它将使您和您之后的其他开发人员都更容易阅读您的代码。

Answer 3

我希望下面的代码可以给您一些提示...


<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
  </script>

</head>

<body>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #8" data-price="0.001">
      <p class="newPrice">0.001$ </p>
      <p class="oldPrice">
        <strike>3$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #9" data-price="0.002">
      <p class="newPrice">0.002$ </p>
      <p class="oldPrice">
        <strike>2$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <script type="text/javascript">

    var cart = (function () {

      const cartStorage = [];
      function Product(name, price, count) {
        this.name = name;
        this.price = price;
        this.count = count;
      }
      var object = {};
      object.addProduct = function (name, price, count) {
        var isProductAlredyInCart = false
        for (var i in cartStorage) {
          if (cartStorage[i].name == name) {
            cartStorage[i].count++;
            isProductAlredyInCart = true;
          }
        }
        if (!isProductAlredyInCart) {
          var newItem = new Product(name, price, count);
          cartStorage.push(newItem);
        }
        console.log(cartStorage);
      }
      return object;
    })();

    $('.addToCart').click(function (event) {
      event.preventDefault();
      var name = $(this).data('name');
      var price = Number($(this).data('price'));
      cart.addProduct(name, price, 1);
    });

  </script>

</body>

</html>

您需要从购物车功能返回对象，@HuỳnhTuân的建议很完美。

我个人建议您首先精通JS基础知识，例如new的工作原理，闭包等。

无法读取未定义的属性“名称”。购物车

3 个答案: