javascript - 如何添加具有相同类名的表单输入字段

Question

我有一个 JavaScript 问题，我仍然可以找到解决方法。

我有一个动态形成的表，它包含表单字段。

代码:

      var table = document.getElementById("table");
      var row = table.insertRow(-1);
      var cell1 = row.insertCell(-1); 
      var cell2 = row.insertCell(-1);
      var cell3 = row.insertCell(-1);
      var cell4 = row.insertCell(-1);
      var cell5 = row.insertCell(-1);
      cell1.innerHTML = count; //this is index, set above as var count = 1;

      cell2.innerHTML = name; //this is a variale dynamically generated
      cell3.innerHTML = '<input type="text" name="quantity[]" onchange="addAll()" class="quantity" id="quantity" value="1" data-price="'+price+'" />'
      cell4.innerHTML = price;
      cell5.innerHTML = '<a href="#" onclick="deleteRow('+count+')">Delete</a>';

他上面会想出类似的东西:

   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="1" data-price="4" />
   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="34" data-price="5" />
   <input type="text" name="quantity[]" onchange="addAll()" class="quantity" value="12" data-price="8" />

然后我有另一个带有标签 TOTAL 的输入字段

  <input name="total" id="total" />

我想在每次 onchange() 之后循环遍历上面的输入表单并进行计算。

 var total = class with quantity[0] * data-price + class with quantity[1] * data-price //and so on for all the input (multiply the input value by the data-price attribute and add all together).

这样我就可以将它放入函数中:

 function addAll() {
    //code that returns the total
    document.GetElementById('total').value = total;
 }

我正在查看 jQuery $("className").each(function () 但真的很困惑

Answer 1

如果你想访问每个类，下面的 jquery 就可以做到:

var total=0;
$(".quantity").each(function() {
    total=total+$(this).val();
});

“.”意思是“选择类”，就像 css 一样。您不能对 id 执行相同的操作，因为 id 应该是唯一的，因此 jquery 将仅返回第一个元素。