亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

jQuery 函數不可逆。[網站購物車功能]

jQuery 函數不可逆。[網站購物車功能]

蠱毒傳說 2023-03-03 19:33:38
我是 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”,但不能再次刪除。
查看完整描述

1 回答

?
暮色呼如

TA貢獻1853條經驗 獲得超9個贊

您的問題是,當您添加事件處理程序時,沒有帶有 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>



查看完整回答
反對 回復 2023-03-03
  • 1 回答
  • 0 關注
  • 116 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號