将总订单乘以jquery中的订单数量

Posted 2023-05-08

【中文标题】将总订单乘以jquery中的订单数量

【英文标题】：Multiply total orders to quantity of order in jquery

【发布时间】：2016-04-18 17:14:51

【问题描述】：

我有一个将价格乘以数量的 jquery。现在我想将总和乘以客户将下的订单数量。我将在哪里插入我的乘法代码？以下是我设想的等式是total=(price*quantity)*numberoforders。这是我无法雄辩地解释的jfiddle

这是我的代码：

html

<form>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName1" data-price="12" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>

        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName2" data-price="6" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>

        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName3" data-price="4" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>

           <li>
            <label>
            Quantity of Orders
                <input min="0" max="5" type="number" class="totalquant" name="quantity" value="1" />
            </label>
        </li>
    </ul>


</form>

<p>Total</p>
<div id="totalDiv">0</div>

jQuery

$('.quantity, .drink').change(calculateTotal);

function calculateTotal() 
    var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() 
        total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    );
    $('#totalDiv').text(total)* parseInt($(this).siblings('.totalquant').val() || 0, 10);

感谢所有帮助

【问题讨论】：

每件商品的价格在哪里

@Wellwisher 它在 data-price="" 下，因为我使用的是商品名称的值

你的代码基本是对的。只需将最后一行更改为$('#totalDiv').text(total * parseInt($('.totalquant').val() || 0, 10));。 .totalquant 不是任何其他输入的直接同级，您希望通过该值将$('#totalDiv').text() 移到外面。简而言之，确保您的选择器是正确的，并且在分配文本之前执行数学运算。 You can simplify your code a lot.

【参考方案1】：

我在https://jsfiddle.net/k91d23p6/3/对您的代码进行了一些更改

基本上，您必须在forEach 之后将total 乘以totalQuant。

//query the DOM once, instead of on every change
var $form = $('form'); //on a real app it would be better to have a class or ID
var $totalQuant = $('.totalquant', $form);
var totalDiv = $('#totalDiv');
$('.quantity, .drink, .totalquant', $form).change(calculateTotal);

function calculateTotal() 
  var total = 0;
  $form.find('.drink:checked').each(function() 
    total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
  );
  var totalQuant = total * parseInt( $totalQuant.val() || 0, 10);
  totalDiv.text(totalQuant);