0

您好，我的代码有问题我想做同样的事情，但使用 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>

4

2 回答 2

0 
var leftQty = targetQty - (currentQty % targetQuantity);

Modulus 运算符%将在 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

ETC

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

var totalPacks = Math.ceil(currentQuantity/targetQuantity)

You have {leftQty} beers of pack {totalPacks}
于 2020-11-20T14:57:56.407 回答
0

非常感谢@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>

于 2020-11-21T12:06:42.323 回答