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() {

  $(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;

}

<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>