Question

我必须使用属性

对DOM中的所有输入求和

data-name="sum"

输入中的值为13.99等。

现在我必须使用所有求和字段的数量创建一个新的输入字段。

Answer 1

您可以使用attribute selector来选择元素，使用.each()来迭代它们

var sum = 0;
//iterate all inputs wiht the attribute data-name="sum"
$('input[data-name="sum"]').each(function () {
    sum += +this.value || 0; //to handle NaN
});
console.log(sum)

Answer 2

var sum = 0;
$('[data-name="sum"]').each(function(){
    sum += parseFloat($(this).val());
});

demo

Answer 3

我坚持将所有数据映射到一个数组中，然后将所有数据相加

使用map()并将其减少为总和：

var sum = $('input[data-name="sum"]').map(function () {
    return +this.value
}).get().reduce(function (a, b) {
    return a + b;
});

Answer 4

我能够使用“ line_cost”标签名称显示6个DOM元素的总和-这将作为小计显示（称为“ ST”方法）。不幸的是，在使用小计值动态计算交付成本时，我不断得到“未定义”，因为在小计工作正常的情况下，该值显示在交付成本选项卡下。我以为该问题是由于在调用该方法之前DOM未完全加载而发生的，但是即使作出了决定if(document.getElementById("sub_total") != null)，我仍然实现了“未定义”值。这种“未定义”值的出现可能是什么问题？

 function calcST(){
  var i;
  var sum = 0; // initialize the sum
  let p = document.getElementsByTagName("line_cost");

  for (i = 0; i < p.length; i++) {
    if (!isNaN(Number(p[i].innerHTML))) {
       sum = Number(sum + Number(p[i].innerHTML)); // p[i].innerHTML gives you the value
    }

  }

  setST(sum, "sub_total");
}


function setST(sum, item_id){
  let i = document.getElementById(item_id);
  i.innerHTML = sum;
  calcDelivCharge();
}


function getST() {
  if(document.getElementById("sub_total") != null){
let i = document.getElementById("sub_total");
let v = i.innerHTML;
return v;

  }
}


function calcDelivCharge(){

  var delCharge;
  var e = getST();

  if(e < 100){
    delcharge = e*0.10
  }else{
    delcharge = 0;
  }

  setDelivCharge("delivery_charge", delCharge);
}

function setDelivCharge(item_id, delCharge){
  let i = document.getElementById(item_id);
  i.innerHTML = delCharge;
  calculateTAX();
}


function getDelivCharge() {
  let i = document.getElementById("delivery_charge");
  let v = i.innerHTML;
  return v;
}

如何使用jquery将DOM中的所有输入值与特定数据属性相加

4 个答案: