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

Question

我有一个 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);
}

感谢所有帮助

Answer 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);
}

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

Multiply total orders to quantity of order in jquery

javascript

jquery

subtotal