首页 > 解决方案 > 无法读取未定义的属性“名称”。购物车

问题描述

我正在尝试用 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>

标签: javascriptjqueryhtml

解决方案


试试这个

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

对来自对象构造函数的新对象使用关键字new


推荐阅读