Суммирование входных групп с помощью jQuery

ProgramBox

Суммирование входных групп с помощью jQuery

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

Я новичок в JavaScript и jQuery, у меня есть некоторая входная группа элементов с 3 параметрами: цена, скидка и количество. Я хотел бы сначала подвести итог, прежде чем отправлять его, чтобы узнать, сколько всего.

пока что вот что я получил:

 <input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<button type="button" onClick="Total()"></button>

На мой взгляд, я мог бы использовать цикл, такой как :

 total = 0;
for(i = 0; i < count(price); i  ){
    total  = price[i] * qty[i] * dsc[i] / 100;
}

кроме того, что, если я удалю группу, изменится ли индекс массива?

1. Вы протестировали код, который у вас в голове, и который вы удобно записали? Работает ли это? У вас есть ошибки? Вы также должны правильно объявлять свои переменные (предпочтительно let или const ).

2. Я попытался поместить результат в оповещение, и он возвращает только [object object] . Я использовал 3 входных данных и удалил 1 из них.

3. alert делает это. Откройте инструменты разработчика в вашем браузере (F12), а затем console.log(total) вместо. Это должно дать вам лучшее представление.

4. попробовал и это, верните то же самое.

Ответ №1:

Используйте jQuery.map для преобразования объектов в массив значений

 function Total() {
    let total = 0;
    //Convert to array of values
    let price = $("input[name='price[]']").map((i, el) => $(el).val());
    let qty = $("input[name='qty[]']").map((i, el) => $(el).val());
    let dsc = $("input[name='dsc[]']").map((i, el) => $(el).val());
    //I prefer each over for
    $.each(price,  (i, element) => {        
        total  = price[i] * qty[i] * dsc[i] / 100;
        //if 'dsc' is discount in % may be the formula is different:
        //example : price = 100 quantity = 1;dsc = 20; =>  grossRowTotal = 100 * 1 = 100; total = 100 - (100*20/100) = 100 - 20 = 80;
        //let grossRowTotal = price[i] * qty[i];
        //total  = grossRowTotal - (grossRowTotal * dsc[i]/ 100);
    });
    console.log(total);
    $("#result").html(total);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<input type="number" name="price[]" placeholder="price">
<input type="number" name="qty[]" placeholder="quantity">
<input type="number" name="dsc[]" placeholder="discount">

<button type="button" onClick="Total()">Total</button>
<div id="result"></div>

Развернуть фрагмент

1. Это именно то, что я хочу, мне просто нужно внести небольшие изменения в это. Большое спасибо за ваше объяснение, сэр. и я только что понял, что я ввел там неправильную формулу, такое просвещение

Ответ №2:

Я не знаю, какого именно результата вы хотите. этот код может вам помочь . попробуйте и отредактируйте в соответствии с вашими требованиями.

 function Total()
{
  let total=0;
  for(i=0;i<$("input[id=price]").length;i  )
{
    let p=$("input[id=price]")[i].value;
    let q=$("input[id=qty]")[i].value;
    let d=$("input[id=dsc]")[i].value;
    total =(p*q)-d;
}
  
  $("#total").val(total);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<input type="number" id="price" placeholder="price">
<input type="number" id="qty" placeholder="quantity">
<input type="number" id="dsc" placeholder="discount">
<br/>
<button type="button" onClick="Total()">Total</button>
<input type="number" id="total" placeholder="total">

Развернуть фрагмент