jQuery 函数不可逆。[网站购物车功能]

Question

我是 jQuery 世界的新手，在尝试添加到网站的购物车功能时遇到了一些困难。

我创建了一个函数来将一个元素（基于它的 id）添加到购物车。这很好用。但是，当我尝试反转它时（比如有人再次单击购物车图标将其删除），购物车数量增加得更多，并且班级不会变回。

您将在我的代码中看到我正在更改视觉表示的类（未选择 = 没有填充的 svg 和选择 = 有填充的 svg）。

我试过切换课程、删除和添加课程，但我想不出更多。任何帮助将不胜感激！

$(document).ready(function() {

  var cart = [];

  $("a.addToCart").click(function(event) {

      var pressedId = event.target.id;

      $("#cart_button").removeClass("hidden");

      $("#" + pressedId).removeClass("addToCart");

      $("#" + pressedId).addClass("addedToCart");

      

      cart.push(pressedId)

      $('.cart--counter').html(cart.length);

  });

});

$(document).ready(function() {

  $("a.addedToCart").click(function(event) {

    var unpressedId = event.target.id;

    $("#" + unpressedId).addClass("addToCart");

    $("#" + unpressedId).removeClass("addedToCart");

    cart.splice( $.inArray(unpressedID,cart) ,1 );

    $('.cart--counter').html(cart.length);

  });

});

下面是带有类和 ID 的 HTML 示例。

<a id="12" class="addToCart">

再次说明：该类从“addToCart”适当更改为“addedToCart”，但不可逆，并且数组已成功更新为适当的“ID”，但不能再次删除。

Answer 1

您的问题是，当您添加事件处理程序时，没有带有 class 的元素addedToCart，因此没有分配任何事件处理程序。您需要改用委托事件处理程序：var cart = [];$(document).ready(function() {&nbsp; $(document).on('click', "a.addToCart", function(event) {&nbsp; &nbsp; var pressedId = event.target.id;&nbsp; &nbsp; $("#cart_button").removeClass("hidden");&nbsp; &nbsp; $("#" + pressedId).removeClass("addToCart");&nbsp; &nbsp; $("#" + pressedId).addClass("addedToCart");&nbsp; &nbsp; cart.push(pressedId)&nbsp; &nbsp; $('.cart--counter').html(cart.length);&nbsp; &nbsp; $('#cart').html(cart.toString());&nbsp; });});$(document).ready(function() {&nbsp; $(document).on('click', "a.addedToCart", function(event) {&nbsp; &nbsp; var unpressedId = event.target.id;&nbsp; &nbsp; $("#" + unpressedId).addClass("addToCart");&nbsp; &nbsp; $("#" + unpressedId).removeClass("addedToCart");&nbsp; &nbsp; cart.splice($.inArray(unpressedId, cart), 1);&nbsp; &nbsp; $('.cart--counter').html(cart.length);&nbsp; &nbsp; $('#cart').html(cart.toString());&nbsp; });});.hidden {&nbsp; display: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><a id="12" class="addToCart">Item 12</a><br /><a id="13" class="addToCart">Item 13</a><div class="cart--counter">**</div><br /><div id="cart"></div><br /><div id="cart_button" class="hidden">cart button</div>