Question

我有两种类型的行（Basic和Extra）。我需要按属性＆＃34;数据类型＆＃34;

分组输入值的SUM

<div class="row-item" data-type="Basic"><input type="number" value="2" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="5" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="4" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="5" class="number-input"></div>

我需要数组的对象：

Basic => sum : 14,
Extra => sum : 8

我尝试了一些东西，但它不起作用......

data = {};
$(".row-item").each(function (index, elem) {

    var type = $(elem).data('type');
    count = $(elem).find(".number-input").val();
    sum += count;

    data[type] = {
        sum: sum
    };
});

Answer 1

您可以在选择器中使用data-type值来选择特定值。

var basic = 0;
$('.row-item[data-type="Basic"]').each(function () {
    basic += parseInt($(this).find('input').val(), 10) || 0;
});


var extra = 0;
$('.row-item[data-type="Extra"]').each(function () {
    extra += parseInt($(this).find('input').val(), 10) || 0;
});

alert(basic + ' ' + extra);

演示：http://jsfiddle.net/tusharj/773va00j/

修改

var obj = { Basic: 0, Extra: 0 }; $('.row-item[data-type]').each(function () { obj[$(this).data('type')] += parseInt($(this).find('input.number-input').val(), 10); }); console.log('Basic ' + obj.Basic); console.log('Extra ' + obj.Extra);

演示：http://jsfiddle.net/tusharj/773va00j/1/

Answer 2

另一种方法如下。如果需要，这也可以让你拥有更多类型。

＆＃13;

var data = {};
$(".row-item").each(function(index, elem) {

  var type = $(elem).data('type');
  var count = parseInt( $(elem).find(".number-input").val(), 10 );
  if (data.hasOwnProperty(type)) {
    data[type]["sum"] += count;
  } else {
    data[type] = {"sum": count};
  }
});
alert (JSON.stringify(data, null, 4));
//console.log(data);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row-item" data-type="Basic"><input type="number" value="2" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="5" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Basic"><input type="number" value="4" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="3" class="number-input"></div>
<div class="row-item" data-type="Extra"><input type="number" value="5" class="number-input"></div>

＆＃13;

循环组中的javascript和值

2 个答案: