У меня есть форма, в которой люди вводят количество, которое они хотят, из списка продуктов. Каждое входное значение представляет желаемую сумму, а атрибут data-price хранит цену продукта.

Я использую этот код jquery для суммирования значений полей

   $(document).ready(function(){

        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".number.qty_input").each(function() {

            $(this).keyup(function(){
                calculateSum();
            });
        });

    });

    function calculateSum() {

        var sum = 0;
        //iterate through each textboxes and add the values
        $(".number.qty_input").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) && this.value.length!=0) {
                sum += parseFloat(this.value);
            }

        });
        //.toFixed() method will roundoff the final sum to 2 decimal places
        $("#the_price_v_m").html(sum.toFixed(2));
    }

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

Благодарность!

О, кстати, HTML, который я использую,

<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
0
Gman 9 Ноя 2014 в 18:47

3 ответа

Лучший ответ

Ваш вопрос немного сбивает с толку без html, но я думаю, вы хотите умножить каждый элемент в цикле на его цену, которая хранится в атрибуте data-*. Так что измените эту строку:

sum += parseFloat(this.value);

К этому:

sum += parseFloat(this.value * $(this).data('price'));

Может потребоваться дополнительный синтаксический анализ, если вы не слишком хорошо знаете свой код:

sum += parseFloat(this.value) * parseFloat($(this).data('price'));

FYI :

.data('price') предоставит вам атрибут с именем data-price в объекте jQuery.

2
undefined 9 Ноя 2014 в 15:58

Один из подходов - использовать

// assign a keyup event-handler to each of the 'input.qty_input' elements:
$('input.qty_input').on('keyup', function(e) 
  // create a temporary variable (to avoid recreating a variable in the map():
  var tmp,
    // iterate over the .qty_input elements, using map()
    sum = $('.qty_input').map(function() {
      tmp = $(this);
      // returning the numeric result of the entered-value multiplied by the data-price:
      return (+tmp.val() * tmp.data('price')) || 0;
    // use get() to form an array:
    }).get().reduce(function(a, b) {
    // reducing the array to a single value, summing all the array-elements together:
      return a + b;
    });
  // assigning the sum to the '#result' element (or whatever you want to do):
  $('#result').text(sum);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<input type="text" class="number qty_input valid" data-price="15" />
<span id="result"></span>

Ссылки:

0
David says reinstate Monica 9 Ноя 2014 в 16:04

Вам не нужно вручную перебирать объект jQuery для присоединения обработчиков событий, jQuery сделает это за вас. Вы можете использовать метод data() для доступа к значению атрибутов данных.

$(document).ready(function() {
  $(".number.qty_input").keyup(function() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".number.qty_input").each(function() {
      var price = $(this).data("price")
        //add only if the value and price is a number
      if (this.value.length && !isNaN(this.value) && !isNaN(price))
        sum += parseFloat(this.value) * parseFloat(price);
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#the_price_v_m").html(sum.toFixed(2));
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<input type="text" class="number qty_input valid" data-price="15">
<span id="the_price_v_m"></span>
0
T J 9 Ноя 2014 в 16:07