Question

我有一个表单，人们可以从产品列表中输入他们想要的数量。每个输入值代表他们想要的金额，属性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));
    }

现在我需要对其进行自定义，以便它允许我将每个字段的属性数据价格乘以字段值。我已经尝试了一些不成功的方法，我想知道我是否可以得到一些帮助。

谢谢！

哦我使用的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">

Answer 1

如果没有html，你的问题有点令人困惑，但我认为你想要将循环中的每个项目乘以它的价格，该价格存储在data-*属性中。所以改变这一行：

sum += parseFloat(this.value);

到此：

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

在不了解您的代码的情况下，可能需要进行一些额外的解析：

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

供参考：

.data('price')将为您提供jQuery对象上名为data-price的属性。

Answer 2

您不必手动迭代jQuery对象来附加事件处理程序，jQuery会为您执行此操作。您可以使用data()方法访问数据属性的值。

＆＃13;

$(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));
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

一种方法是使用

// 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>

参考文献：

JavaScript的：
- Array.prototype.reduce()。
jQuery的：
- get()。
- map()。
- on()。
- text()。

如何将一些输入字段值相加（加上乘以表示价格的属性的值）

3 个答案: