将 12 件产品添加到购物车

Question

您好，我的代码有问题，我想做同样的事情，但使用 12 的倍数而不是数字 12

例如 12 瓶啤酒、24 瓶啤酒等，但不是 13、14 或 15 瓶啤酒。

抱歉，我的英语很不好。

https://bcambre-eshop.webflow.io/test

谢谢

 <script> // Initialize texts $(".beer-info").hide(); $(".beer-info-alt").hide(); $(".checkout-abs").hide(); // select the target node — here : .cart-list var target = document.getElementById('target'); // input here your reference value var targetQty = 12; // create an observer instance var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { //console.log('cart update'); setTimeout(function(){ var currentQty = $('.w-commerce-commercecartopenlinkcount').text(); var leftQty = targetQty - currentQty ; // update counter — console.log('cans missing' + ' ' + leftQty); if ( leftQty <= 0 ) { $(".beers-left").text(leftQty); $(".beer-info").hide(); $(".beer-info-alt").show(); $(".checkout-abs").show(); } else { $(".beer-info-alt").hide(); $(".checkout-abs").hide(); $(".beer-info").show(); $(".beers-left").text(leftQty); } // update progression stackbar — console.log(progressBar); var progressBar = currentQty / targetQty * 100; $(".completed-bar").css('width', progressBar + '%'); }, 300); }); }); // configuration of the observer: var config = { attributes: false, childList: true, characterData: false }; // pass in the target node, as well as the observer options observer.observe(target, config); </script>

Answer 1

var leftQty = targetQty - (currentQty % targetQuantity);

模数运算符%将在 currentQuantity 除以目标数量后为您提供余数。 然后，您可以从 targetQuantity 中减去该值，以得出一包能容纳多少啤酒。

1 % 12 = 1
    12 - 1 = 11 beers remaining in a 12 pack

13 % 12 = 1
    12 - 1 = 11 beers remaining in a 24 pack

25 % 12 = 1
    12 - 1 = 11 beers remaining in a 36 pack

等等

您可以在进度指示器旁边显示当前的包数量。

var totalPacks = Math.ceil(currentQuantity/targetQuantity)

You have {leftQty} beers of pack {totalPacks}

Answer 2

非常感谢@hapi，你为我节省了宝贵的时间:)

现在我的进度条还有另一个问题。 每次我们添加 12 个附加产品时，是否可以将其重置为 0？ （例如：当添加 13 个产品时，进度条就像只添加了一个产品而与 25 等相同）

再次感谢你的帮助 ：）

这里是我更新的代码和工作进度的新链接https://bcambre-eshop.webflow.io/untitled

 <script> // Initialize texts $(".beer-info").hide(); $(".beer-info-alt").hide(); $(".checkout-abs").hide(); // select the target node — here : .cart-list var target = document.getElementById('target'); // input here your reference value var targetQty = 12; // create an observer instance var observer = new MutationObserver(function (mutations) { mutations.forEach(function (mutation) { //console.log('cart update'); setTimeout(function(){ var currentQty = $('.w-commerce-commercecartopenlinkcount').text(); var leftQty = targetQty - currentQty ; // update counter — console.log('cans missing' + ' ' + leftQty); if ( leftQty <= 0 ) { $(".beers-left").text(leftQty); $(".beer-info").hide(); //$(".beer-info-alt").show(); //$(".checkout-abs").show(); } else { //$(".beer-info-alt").hide(); //$(".checkout-abs").hide(); $(".beer-info").show(); $(".beers-left").text(leftQty); } // var leftQuantity = targetQty - (currentQty % targetQty); if ( leftQuantity >= 12 ) { $(".beer-info-alt").show(); $(".checkout-abs").show(); } else { $(".beer-info-alt").hide(); $(".checkout-abs").hide(); } var totalPacks = Math.ceil(currentQty/targetQty); $(".number-of-packs").text(totalPacks); $(".beers-left").text(leftQty); $(".beers-left2").text(leftQuantity); // update progression stackbar — console.log(progressBar); var progressBar = currentQty / targetQty * 100; $(".completed-bar").css('width', progressBar + '%'); }, 300); }); }); // configuration of the observer: var config = { attributes: false, childList: true, characterData: false }; // pass in the target node, as well as the observer options observer.observe(target, config); </script>