Javascript 如何使用“添加到购物车”对象解决此问题？

我在这里使用了

中的起始代码

：。我什么都没变，只是换了东西，现在“添加到购物车”不起作用了。对我需要做什么有什么建议吗？我不明白发生了什么，因为一切基本上都是一样的。我已经包括了我所有的代码。提前感谢您的帮助

const containerElement = document.querySelector('.container');

let items= [];

let template = `
  {{#each items}}
    <div class="row">
      <div class="col">
        <div class="card" style="width: 20rem;">
          <img class="card-img-top" src="{{image}}" alt="Card image cap">
            <div class="card-block">
            <h4 class="card-title">{{title}}</h4>
            <p class="card-text">Price: &#36;{{price}}</p>
            <a href="#" data-name="{{title}}" data-price="{{price}}" class="add-to-cart btn btn-primary">Add to cart</a>
            </div>
          </div>
      </div>
    </div>
  {{/each}}
`;

function render(context) {
let compiled = Handlebars.compile(template);
containerElement.innerHTML = compiled(context);
}

$.ajax({
url: 'http://5ceb36a60c871100140bf873.mockapi.io/v1/item',
method: 'GET'
}).done(function (resp) {
console.log(resp);
console.log(items);
items = {items : resp}
console.log(items);
render(items);
});

// ************************************************
// Shopping Cart API
// ************************************************

var shoppingCart = (function() {
  // =============================
  // Private methods and propeties
  // =============================
  cart = [];

  // Constructor
  function Item(name, price, count) {
    this.name = name;
    this.price = price;
    this.count = count;
  }

  // Save cart
  function saveCart() {
    sessionStorage.setItem('shoppingCart', JSON.stringify(cart));
  }

    // Load cart
  function loadCart() {
    cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
  }
  if (sessionStorage.getItem("shoppingCart") != null) {
    loadCart();
  }


  // =============================
  // Public methods and propeties
  // =============================
  var obj = {};

  // Add to cart
  obj.addItemToCart = function(name, price, count) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart[item].count ++;
        saveCart();
        return;
      }
    }
    var item = new Item(name, price, count);
    cart.push(item);
    saveCart();
  }
  // Set count from item
  obj.setCountForItem = function(name, count) {
    for(var i in cart) {
      if (cart[i].name === name) {
        cart[i].count = count;
        break;
      }
    }
  };
  // Remove item from cart
  obj.removeItemFromCart = function(name) {
      for(var item in cart) {
        if(cart[item].name === name) {
          cart[item].count --;
          if(cart[item].count === 0) {
            cart.splice(item, 1);
          }
          break;
        }
    }
    saveCart();
  }

  // Remove all items from cart
  obj.removeItemFromCartAll = function(name) {
    for(var item in cart) {
      if(cart[item].name === name) {
        cart.splice(item, 1);
        break;
      }
    }
    saveCart();
  }

  // Clear cart
  obj.clearCart = function() {
    cart = [];
    saveCart();
  }

  // Count cart 
  obj.totalCount = function() {
    var totalCount = 0;
    for(var item in cart) {
      totalCount += cart[item].count;
    }
    return totalCount;
  }

  // Total cart
  obj.totalCart = function() {
    var totalCart = 0;
    for(var item in cart) {
      totalCart += cart[item].price * cart[item].count;
    }
    return Number(totalCart.toFixed(2));
  }

  // List cart
  obj.listCart = function() {
    var cartCopy = [];
    for(i in cart) {
      item = cart[i];
      itemCopy = {};
      for(p in item) {
        itemCopy[p] = item[p];

      }
      itemCopy.total = Number(item.price * item.count).toFixed(2);
      cartCopy.push(itemCopy)
    }
    return cartCopy;
  }

  // cart : Array
  // Item : Object/Class
  // addItemToCart : Function
  // removeItemFromCart : Function
  // removeItemFromCartAll : Function
  // clearCart : Function
  // countCart : Function
  // totalCart : Function
  // listCart : Function
  // saveCart : Function
  // loadCart : Function
  return obj;
})();


// *****************************************
// Triggers / Events
// ***************************************** 
// Add item
$('.add-to-cart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  shoppingCart.addItemToCart(name, price, 1);
  displayCart();
});

// Clear items
$('.clear-cart').click(function() {
  shoppingCart.clearCart();
  displayCart();
});


function displayCart() {
  var cartArray = shoppingCart.listCart();
  var output = "";
  for(var i in cartArray) {
    output += "<tr>"
      + "<td>" + cartArray[i].name + "</td>" 
      + "<td>(" + cartArray[i].price + ")</td>"
      + "<td><div class='input-group'><button class='minus-item input-group-addon btn btn-primary' data-name=" + cartArray[i].name + ">-</button>"
      + "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
      + "<button class='plus-item btn btn-primary input-group-addon' data-name=" + cartArray[i].name + ">+</button></div></td>"
      + "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
      + " = " 
      + "<td>" + cartArray[i].total + "</td>" 
      +  "</tr>";
  }
  $('.show-cart').html(output);
  $('.total-cart').html(shoppingCart.totalCart());
  $('.total-count').html(shoppingCart.totalCount());
}

// Delete item button

$('.show-cart').on("click", ".delete-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCartAll(name);
  displayCart();
})


// -1
$('.show-cart').on("click", ".minus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.removeItemFromCart(name);
  displayCart();
})
// +1
$('.show-cart').on("click", ".plus-item", function(event) {
  var name = $(this).data('name')
  shoppingCart.addItemToCart(name);
  displayCart();
})

// Item count input
$('.show-cart').on("change", ".item-count", function(event) {
   var name = $(this).data('name');
   var count = Number($(this).val());
  shoppingCart.setCountForItem(name, count);
  displayCart();
});

displayCart();

const containerElement=document.querySelector（'.container'）；
设项目=[]；
让模板=`
{{{#每项}
{{title}}
价格：36；{{price}}
{{/每个}}
`;
函数渲染（上下文）{
let compiled=handlebar.compile（模板）；
containerElement.innerHTML=已编译（上下文）；
}
$.ajax({
网址：'http://5ceb36a60c871100140bf873.mockapi.io/v1/item',
方法：“获取”
}).完成（功能（resp）{
控制台日志（resp）；
控制台日志（项目）；
items={items:resp}
控制台日志（项目）；
提供（物品）；
});
// ************************************************
//购物车API
// ************************************************
var shoppingCart=（函数（）{
// =============================
//私人方法和财产
// =============================
购物车=[]；
//建造师
功能项（名称、价格、数量）{
this.name=名称；
这个价格=价格；
this.count=计数；
}
//储蓄车
函数saveCart（）{
setItem（'shoppingCart'，JSON.stringify（cart））；
}
//装载车
函数loadCart（）{
cart=JSON.parse（sessionStorage.getItem（'shoppingCart'）；
}
if（sessionStorage.getItem（“shoppingCart”）！=null）{
装载车（）；
}
// =============================
//公共方法和财产
// =============================
var obj={}；
//添加到购物车
obj.addItemToCart=函数（名称、价格、计数）{
用于（购物车中的var项目）{
if（购物车[项目]。名称===名称）{
购物车[商品]。计数++；
saveCart（）；
返回；
}
}
var项目=新项目（名称、价格、数量）；
推车推（物品）；
saveCart（）；
}
//设置项目的计数
obj.setCountForItem=函数（名称、计数）{
用于（购物车中的var i）{
if（购物车[i].name==名称）{
购物车[i]。计数=计数；
打破
}
}
};
//从购物车中删除项目
obj.removitemfromcart=函数（名称）{
用于（购物车中的var项目）{
if（购物车[项目]。名称===名称）{
购物车[商品]。计数--；
如果（购物车[项目]。计数===0）{
拼接车（项目1）；
}
打破
}
}
saveCart（）；
}
//从购物车中删除所有项目
obj.removietemfromcartall=函数（名称）{
用于（购物车中的var项目）{
if（购物车[项目]。名称===名称）{
拼接车（项目1）；
打破
}
}
saveCart（）；
}
//清车
obj.clearCart=函数（）{
购物车=[]；
saveCart（）；
}
//计数车
obj.totalCount=函数（）{
var totalCount=0；
用于（购物车中的var项目）{
totalCount+=购物车[商品]。计数；
}
返回totalCount；
}
//总购物车
obj.totalCart=函数（）{
var totalCart=0；
用于（购物车中的var项目）{
totalCart+=购物车[项目]。价格*购物车[项目]。计数；
}
返回编号（totalCart.toFixed（2））；
}
//列表购物车
obj.listCart=函数（）{
var cartCopy=[]；
对于（我在购物车中）{
项目=购物车[i]；
itemCopy={}；
（项目中的p）{
项目副本[p]=项目[p]；
}
itemCopy.total=数量（item.price*item.count）.toFixed（2）；
cartCopy.push（itemCopy）
}
返回文本；
}
//购物车：阵列
//项目：对象/类
//附加部分：函数
//removeItemFromCart:函数
//removeItemFromCartAll:函数
//clearCart：函数
//countCart：函数
//totalCart:函数
//listCart:函数
//存储车：函数
//装载车：功能
返回obj；
})();
// *****************************************
//触发器/事件
// ***************************************** 
//添加项
$（'.add to cart'）。单击（函数（事件）{
event.preventDefault（）；
变量名称=$（this.data（'name'）；
var价格=数字（$（this）.data（'price'）；
shoppingCart.addItemToCart（名称、价格、1）；
displayCart（）；
});
//清除项目
$（'.clear cart'）。单击（函数（）{
shoppingCart.clearCart（）；
displayCart（）；
});
函数displayCart（）{
var cartary=shoppingCart.listCart（）；
var输出=”；
for（数组中的变量i）{
输出+=“”
+“”+cartArray[i]。名称+“”
+“（“+cartary[i].price+”）”
+ "-"
+ ""
+ "+"
+“X”
+ " = " 
+“”+cartArray[i]。总计+“”
+  "";
}
$（'.show cart'）.html（输出）；
$（'.total cart'）.html（shoppingCart.totalCart（））；
$（'.total count'）.html（shoppingCart.totalCount（））；
}
//删除项目按钮
$（'.show cart'）。在（“单击”、“.delete item”上，函数（事件）{
变量名称=$（this.data（'name'））
shoppingCart.removeItemFromCartAll（名称）；
displayCart（）；
})
// -1
$（'.show cart'）。在（“单击”、“.减号项”上，函数（事件）{
变量名称=$（this.data（'name'））
shoppingCart.removeItemFromCart（名称）；
displayCart（）；
})
// +1
$（'.show cart'）。在（“单击”、“.plus项”上，函数（事件）{
变量名称=$（this.data（'name'））
shoppingCart.addItemToCart（名称）；
displayCart（）；
})
//项目计数输入
$（'.show cart'）。打开（“更改”、“.item count”，函数（事件）{
变量名称=$（this.data（'name'）；
var count=Number（$（this.val（））；
shoppingCart.setCountForItem（名称、计数）；
displayCart（）；
});
displayCart（）；

购物车JS
购物车（）清除购物车
运货马车
&时代；
总价：$
接近
现在点菜

您说“添加到购物车”不起作用，但

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Shopping cart JS</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


      <link rel="stylesheet" href="index.css">


</head>
<body>
  <!-- Nav -->
  <nav class="navbar navbar-inverse bg-inverse fixed-top bg-faded">
      <div class="row">
          <div class="col">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#cart">Cart (<span class="total-count"></span>)</button><button class="clear-cart btn btn-danger">Clear Cart</button></div>
      </div>
  </nav>

  <!-- Main -->
  <div class="container"></div>  

   <!-- Modal -->
  <div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Cart</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="show-cart table">

          </table>
          <div>Total price: $<span class="total-cart"></span></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Order now</button>
        </div>
      </div>
    </div>
  </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.js"></script>
<script src="index.js"></script>
</body>
</html>

function afterRender() {
    $('.add-to-cart').click(function(event) {
        event.preventDefault();
        var name = $(this).data('name');
        var price = Number($(this).data('price'));
        shoppingCart.addItemToCart(name, price, 1);
        displayCart();
    });
}

function render(context) {
    let compiled = Handlebars.compile(template);
    containerElement.innerHTML = compiled(context);
    afterRender();
}