Question

我在计算每个表行的价格和数量时遇到问题。在控制台中我可以看到计算结果。但是当试图在桌面上显示时，它将第一行的所有总和复制到所有行中。

以下是计算部分和表格显示的示例代码。

jQuery.ajax({
                    type: "POST",
                    url: "http://ayambrand-com-my-v1.cloudaccess.host/index.php?option=com_echarity&format=raw&task=api.get_product_name",
                    data: {dataArrayPost : Data},
                    success: function(data){
                        // console.log('Result process get product name' + data);
                        var a = JSON.parse(data);
                        // console.log('Result from get_product_name');
                        // console.log(a);
                        var prodName = a.productName; 
                        var splitProductName = "";
                        var prodQty = a.quota; 
                        var splitProductQuota = "";
                        var prodPrice = a.price;
                        var splitProductPrice = "";
                        var discountedPrice = "";


                        var contents = '<table id="tableDonateDisplay" class="table table-hover">';
                        contents += "<tr>";
                        contents += '<th>' + 'Product' + '</th>' + '<th>' + 'Quantity Need' + '</th>' + '<th>' + 'Price Each' + '</th>' + '<th>' + 'My Donation' + '</th>' + '<th>' + 'Amount' + '</th>';
                        jQuery.each(prodName, function(index1, value1) {
                            // console.log(prodName);
                            splitProductName = value1;
                            contents += "<tr>";
                            contents += '<td>' + splitProductName;
                            jQuery.each(prodQty, function(index, value) {
                                if (index1 == index) {
                                    splitProductQuota = value;
                                    contents += '</td><td>' + splitProductQuota;
                                    jQuery.each(prodPrice, function(index2, value2){
                                        jQuery.each(value2, function(index3, value3){
                                            if(index == index2){
                                                splitProductPrice = value3.price_value_with_tax.toFixed(2);
                                                // console.log(splitProductPrice);
                                                var formQuantityUpdate = "<div class='amount-controller' data-module='amount-controller'><span id='qtyminus' field='quantity' class='handle'><i class='fas fa-minus-square'></i></span><input class='input-num' type='text' id='num[]' name='number' value='0'><span id='qtyplus' field='quantity' class='handle qtyPlusHandle'><i class='fas fa-plus-square'></i></span><input type='hidden' id='pricePerProduct' name='priceHidden' value='" + splitProductPrice +"'><input type='hidden' id='maxQuantity' name='maxQuantity' value='" + splitProductQuota +"'></div>";

                                                contents += '</td><td>' + 'RM ' + splitProductPrice + '</td>';
                                                contents += '<td>' + formQuantityUpdate + '</td>' + '<td>' + '' + '</td>' + '<td class="eachSum">' + '' + '</td>';
                                                contents += "</tr>";
                                            }
                                        });
                                    });
                                }
                            });
                        });
                        contents += "</tr></table>";
                        if (jQuery('#contentNeed').html()) {
                            jQuery( "#contentNeed" ).empty();
                        }
                        else {
                        }

                        jQuery('#contentNeed').append(contents);
                    }
                });

以下是计算和数量加减去输入的部分。当数量达到每个项目的数量限制时，数量将停止。

jQuery(document).ready(function() {
    var counterTotal = 0;
    var quantity = 0;
    var maxQuantity = 0;

    jQuery(document).on('click','#qtyplus',function(e){
        e.preventDefault();
        fieldName = jQuery(this).attr('field');
        var container = jQuery(this).parents('.amount-controller');
        var currentVal = parseInt(container.children(".input-num").val());
        var priceVal = parseFloat(container.children("#pricePerProduct").val());
        var totalPriceCont = jQuery('.eachSum');
        // totalPriceCont = jQuery('#eachSum');
        maxQuantity = parseInt(container.children("#maxQuantity").val());
        var val2 = currentVal + 1;
        if (!isNaN(val2)) {
            container.children(".input-num").val(val2);
        } else {
            container.children(".input-num").val(0);
        }
        quantity = val2;
        if(quantity > maxQuantity){
            quantity = maxQuantity;
            container.children(".input-num").val(quantity);
            return false;
        }
        else{
            console.log('Quantity Plus :' + quantity);
            counterTotal = priceVal * quantity;
            totalEach = counterTotal.toFixed(2);
            console.log('Sum Total Price Qty Plus : ' + totalEach);
            totalPriceCont.html(parseInt(totalEach));
        }
    });

    jQuery(document).on('click', '#qtyminus', function(e) {
        e.preventDefault();

        fieldName = jQuery(this).attr('field');

        var container = jQuery(this).parents('.amount-controller');
        var currentVal = parseInt(container.children(".input-num").val());
        var priceVal = parseFloat(container.children("#pricePerProduct").val());
        var totalPriceCont = jQuery('.eachSum');
        // console.log(priceVal);
        var val3 = currentVal - 1;

        if (!isNaN(currentVal) && currentVal > 0) {
            container.children(".input-num").val(currentVal - 1);
        } else {
            container.children(".input-num").val(0);
        }
        quantity = val3;
        console.log('Quantity Minus :' + quantity);
        console.log(currentVal);
        counterTotal = priceVal * quantity;
        totalEach = counterTotal.toFixed(2);
        console.log('Sum Total Price Qty Minus : ' + totalEach);
        totalPriceCont.html(parseInt(totalEach));
    }); 
    // totalPriceCont.html(parseInt(totalEach));
});

Results 你们能指导我做这件事并展示我错误地做了什么。谢谢你提前。

Answer 1

尝试启动'totalPriceCont'对象，如下所示：

var totalPriceCont = jQuery(this).closest('tr').find('.eachSum');

使用数量和价格的乘法jQuery计算每一行并显示在表格上

1 个答案: