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

Again, for clarification: the class changes appropriately from "addToCart" to "addedToCart" but is not reversible & the array is successfully updated with appropriate "ID" but can not be removed again.

标签： javascriptjqueryarrays

Answer 1

Your issue is that when you add your event handlers, there are no elements with class addedToCart, so no event handlers get assigned. You need to use a delegated event handler instead:

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>