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

我对jQuery的世界还很陌生，在尝试向网站添加购物车功能时遇到了一些困难

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

您将在我的代码中看到，我正在更改视觉表示的类（unselected=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”，但无法再次删除。

您的问题是，当添加事件处理程序时，没有带有class

addedToCart的元素，因此不会分配任何事件处理程序。您需要改为使用：


var-cart=[]；
$（文档）.ready（函数（）{
$（文档）。在（'单击'，“a.addToCart”，函数（事件）{
var pressedId=event.target.id；
$（“#购物车按钮”）.removeClass（“隐藏”）；
$（“#”+按edid.removeClass（“addToCart”）；
$（“#”+pressedId）.addClass（“addedToCart”）；
购物车推送（按EDID）
$（'.cart--counter'）.html（cart.length）；
$（'#cart'）.html（cart.toString（））；
});
});
$（文档）.ready（函数（）{
$（文档）。在（'单击'，“a.addedToCart”，函数（事件）{
var unpassedid=event.target.id；
$（“#”+unpassedd）.addClass（“addToCart”）；
$（“#”+unpassedd）.removeClass（“addedToCart”）；
小车拼接（$.inArray（未组装，小车），1）；
$（'.cart--counter'）.html（cart.length）；
$（'#cart'）.html（cart.toString（））；
});
});
。隐藏{
显示：无；
}

项目12

项目13
**




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


var-cart=[]；
$（文档）.ready（函数（）{
$（文档）。在（'单击'，“a.addToCart”，函数（事件）{
var pressedId=event.target.id；
$（“#购物车按钮”）.removeClass（“隐藏”）；
$（“#”+按edid.removeClass（“addToCart”）；
$（“#”+pressedId）.addClass（“addedToCart”）；
购物车推送（按EDID）
$（'.cart--counter'）.html（cart.length）；
$（'#cart'）.html（cart.toString（））；
});
});
$（文档）.ready（函数（）{
$（文档）。在（'单击'，“a.addedToCart”，函数（事件）{
var unpassedid=event.target.id；
$（“#”+unpassedd）.addClass（“addToCart”）；
$（“#”+unpassedd）.removeClass（“addedToCart”）；
小车拼接（$.inArray（未组装，小车），1）；
$（'.cart--counter'）.html（cart.length）；
$（'#cart'）.html（cart.toString（））；
});
});
。隐藏{
显示：无；
}

项目12

项目13
**




购物车按钮
我尝试了此解决方案，它允许将项目从数组中删除，但由于某种原因类没有更改。我尝试添加多个cart元素，然后显示数组。都很好。然后我“重新选择”了一个cart元素，并将其从数组中删除，但当要求在警报框中显示时，它仅弹出数组中的最后一项，并且没有为id值提供任何输出。@KraftDamus我已使用多个项目更新了演示，每次添加/删除都会显示cart数组的内容。在演示中，它完全按照预期工作（如果您在
a
链接上
Inspect element
，您将看到它们在被单击时更改了类）。好的，所以我尝试了标签中的文本，这很有效。。。但我正试图使用一个可视化的…确切地说是一个svg。出于某种原因，a标记不喜欢文本以外的任何东西。@Damus这似乎是svg的一个问题，具体取决于您在标记中如何实例化它。看，别担心，我很高兴能帮上忙。如果这确实回答了你的问题，请考虑标记答案接受（在下/下投票箭头下的复选标记）。请参阅，我尝试了此解决方案，它允许将项从数组中删除，但由于某种原因类没有更改。我尝试添加多个cart元素，然后显示数组。都很好。然后我“重新选择”了一个cart元素，并将其从数组中删除，但当要求在警报框中显示时，它仅弹出数组中的最后一项，并且没有为id值提供任何输出。@KraftDamus我已使用多个项目更新了演示，每次添加/删除都会显示cart数组的内容。在演示中，它完全按照预期工作（如果您在
a
链接上
Inspect element
，您将看到它们在被单击时更改了类）。好的，所以我尝试了标签中的文本，这很有效。。。但我正试图使用一个可视化的…确切地说是一个svg。出于某种原因，a标记不喜欢文本以外的任何东西。@Damus这似乎是svg的一个问题，具体取决于您在标记中如何实例化它。看，别担心，我很高兴能帮上忙。如果这确实回答了你的问题，请考虑标记答案接受（在下/下投票箭头下的复选标记）。看到和