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

问题描述

我对jQuery领域还很陌生，并且在尝试将购物车功能添加到网站时遇到了一些困难。

我创建了一个函数，用于将元素（基于其ID）添加到购物车中。这很好。但是，当我尝试将其撤消时（例如，有人再次单击购物车图标将其删除），购物车数量会增加，并且班级也不会变回原来的状态。

您将在我的代码中看到我正在更改可视表示的类（未选择= svg（不填充）和selected = 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”成功更新了数组，但无法再次删除。

解决方法

您的问题是，当您添加事件处理程序时，没有元素为null_value类的元素，因此不会分配任何事件处理程序。您需要改用delegated event handler：

addedToCart

var cart = [];

$(document).ready(function() {
  $(document).on('click',"a.addToCart",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);
    $('#cart').html(cart.toString());
  });
});

$(document).ready(function() {
  $(document).on('click',"a.addedToCart",function(event) {
    var unpressedId = event.target.id;
    $("#" + unpressedId).addClass("addToCart");
    $("#" + unpressedId).removeClass("addedToCart");

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

    $('.cart--counter').html(cart.length);
    $('#cart').html(cart.toString());
  });
});

.hidden {
  display: none;
}