Question

我的产品页面上有一个数量框，当你增加或减少数量时，一个方框会突出显示你得到的折扣，但出于某种原因，它突出显示3个包更多，当它在4时甚至我的计算突出显示当数量> = 3

时

我的代码：

           //QUANTITY BUTTONS
    var upBtn = jQuery('#btn-qty-up');
    var downBtn = jQuery('#btn-qty-down');
    var currentQty = document.getElementById('qty_extention'); 

    var priceTable = jQuery('#multibuy table');

    var qty = currentQty.value; 

    downBtn.click(function(){
        var currentQty = document.getElementById('qty_extention'); 
        var qty = currentQty.value; 
        //console.log(qty);
        //console.log('down');
        if(!isNaN( qty ) && qty > 0 ){
            currentQty.value--;


            //VARIBLES DECLARED
            var newPrice = jQuery('#dynamic_pricing').find('h1');
            var screwinput = jQuery('select#attribute186').find(":selected").text();

            var calPrice;
            var QtyPrice;

            //IF QUANTITY IS MORE THAN X THEN PRICE IS X
            switch(true) {
                case (qty <= 2):
                    QtyPrice = '12.95';
                    priceTable.find('tr:first-child').css('background', 'none');
                    break;
                case (qty >=3 && qty <= 4):
                    QtyPrice = '12.30';
                    priceTable.find('tr:first-child').css('background', '#ccc');
                    priceTable.find('tr:nth-child(2)').css('background', 'none');

                    break;
                case (qty >=5 && qty <= 9):
                    QtyPrice = '11.65';
                    priceTable.find('tr:first-child').css('background', 'none');
                    priceTable.find('tr:nth-child(2)').css('background', '#ccc');
                    priceTable.find('tr:nth-child(3)').css('background', 'none');
                    break;
                case (qty >=10):
                    QtyPrice = '10.95';
                    priceTable.find('tr:nth-child(2)').css('background', 'none');
                    priceTable.find('tr:nth-child(3)').css('background', '#ccc');
                    break;
            }

            jQuery('#qty').val(currentQty.value);

            calPrice = (QtyPrice * currentQty.value);
            newPrice.html('£' + calPrice.toFixed(2));

        }         

       return false;
    });

    upBtn.click(function(){
        var currentQty = document.getElementById('qty_extention'); 
        var qty = currentQty.value; 
        //console.log(qty);
        //console.log('up');
        if( !isNaN( qty )) {
            currentQty.value++;

            //VARIBLES DECLARED
            var newPrice = jQuery('#dynamic_pricing').find('h1');
            var screwinput = jQuery('select#attribute186').find(":selected").text();

            var calPrice;
            var QtyPrice;

            //IF QUANTITY IS MORE THAN X THEN PRICE IS X
            switch(true) {
                case (qty <= 2):
                    QtyPrice = '12.95';
                    priceTable.find('tr:first-child').css('background', 'none');
                    break;
                case (qty >=3 && qty <= 4):
                    QtyPrice = '12.30';
                    priceTable.find('tr:first-child').css('background', '#ccc');
                    priceTable.find('tr:nth-child(2)').css('background', 'none');
                    break;
                case (qty >=5 && qty <= 9):
                    QtyPrice = '11.65';
                    priceTable.find('tr:first-child').css('background', 'none');
                    priceTable.find('tr:nth-child(2)').css('background', '#ccc');
                    priceTable.find('tr:nth-child(3)').css('background', 'none');
                    break;
                case (qty >=10):
                    QtyPrice = '10.95';
                    priceTable.find('tr:nth-child(2)').css('background', 'none');
                    priceTable.find('tr:nth-child(3)').css('background', '#ccc');
                    break;
            }

            jQuery('#qty').val(currentQty.value);

            calPrice = (QtyPrice * currentQty.value);
            newPrice.html('£' + calPrice.toFixed(2));
        }

        return false;
    });

这里有效：

我可能会稍微计算一下，任何帮助都会非常感激。

Answer 1

现在我们已经看到了您的完整代码，完全重写了我的答案。

您正在设置var qty = currentQty.value，之后正在修改值：currentQty.value--;

此时不会更改qty的值。您可以直接在交换机中访问currentQty.value，就像计算价格时一样，或者确保在修改价值后定义qty。

我还要指出你在这里复制了大量的代码。重构更新UI以反映新数量的代码可能会帮助您首先避免此问题。

考虑做这样的事情：

downBtn.click(function(){
    document.getElementById('qty_extention').value--; 
    updatePrice();
});

upBtn.click(function(){
    document.getElementById('qty_extention').value++; 
    updatePrice();
});

function updatePrice() {
    var qty = document.getElementById('qty_extention').value;
    // set both new price and table highlights here according to updated price
}

如果#qty_extention不是只读的，那么您还应该在其updatePrice事件上运行change，以防有人在不使用您的按钮的情况下手动输入新数量。

为什么不突出显示正确的数字？

1 个答案: