JS - 将相同函数附加到多个HTML表单

Question

我正在尝试制作一个类似电子商务的网页（用于练习），其中点击任何按钮都会通过输入元素中指定的数量更新购物车价值。 到目前为止，我只能从第一个表单更新购物车，因为当我尝试使用循环在每个表单上分配函数时，购物车会在一毫秒内更新，然后返回零。我认为这是因为作用域的原因。 我知道有一种更简单的方法可以做到这一点，而不必为每个document.forms[n]手动分配函数。 JS代码：

 window.onload = function() 
 {
    var getForm = document.forms[0];
    var numItems = 0;
    getForm.onsubmit = function(event) 
    {
      event.preventDefault();
      var getInput = getForm.elements["num-item"].value;
      if(parseInt(getInput)) 
      {
        numItems = numItems + parseInt(getInput);
        var getCart = document.getElementById("item-count");
        getCart.innerHTML = numItems;
        getForm.reset();            
      }
      else 
      {
        alert("Please enter a valid number");
      }
  }

HTML 购物车：

<div class="basket">
    <p><i class="fa fa-shopping-basket"></i></p>
    <p id="item-count">0</p>
</div>

HTML表单：为简洁起见，我只发布了一个表单示例，但实际上，我还有6个完全相同的表单。

<div class="buy-config">
    <form class="buy-form" name="buy-form">
        <label>Quantity:</label>
            <input type="text" class="num-item" />
            <button class="buy-btn">Add to Cart</button>
    </form>
</div>

- Charisse

Answer 1

通过查询选择器（根据性能要求和标记灵活性使用您喜欢的任何方法，我使用了getElementsByClassName），并执行for循环来遍历所有表单。

在循环内部，使用addEventListener将函数绑定到“submit”事件。您可以在行内定义函数（如我所做的那样），也可以在其他地方定义函数，将其分配给变量，并在绑定事件时引用该变量。

在事件侦听器函数中，您将引用提交的表单作为this。

除上述更改外，我对您的代码进行了一些微小的更改：

1. 您之前的版本每次都会覆盖购物车的内容。这可能是有意的，具体取决于您是否为每个项目拥有一个“篮子”或一个总体（这在问题中不清楚）。因此，我将numItems初始化为购物车中当前物品的数量，而不是将其初始化为零。
2. 考虑使用input type="number" HTML表单元素。它们受到几乎所有浏览器的支持，仅接受数字-它们还具有向上/向下箭头，并且可以使用滚轮设置。在不支持它们的浏览器上，它们会回退到基本文本输入。

var forms = document.getElementsByClassName("buy-form");
for (var i = 0; i < forms.length; i++) {
  forms[i].addEventListener("submit", function(event) {
    event.preventDefault();
    var numItems = parseInt(document.getElementById("item-count").innerHTML);
    var getInput = this.getElementsByClassName("num-item")[0].value;
    if (parseInt(getInput)) {
      numItems = numItems + parseInt(getInput);
      var getCart = document.getElementById("item-count");
      getCart.innerHTML = numItems;
      this.reset();
    } else {
      alert("Please enter a valid number");
    }
  });
}

<div class="basket">
  <p><i class="fa fa-shopping-basket"></i></p>
  <p id="item-count">0</p>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>
<div class="buy-config">
  <form class="buy-form" name="buy-form">
    <label>Quantity:</label>
    <input type="number" class="num-item" />
    <button class="buy-btn">Add to Cart</button>
  </form>
</div>

- Woodrow Barlow

---

非常感谢！它起作用了！问题是，在 var getInput = this.getElementsByClassName("num-item")[0].value; 中 [0] 是什么意思？我猜它不是当前索引，否则你会使用 i。那么这行代码到底是做什么的？ - Charisse

@Charisse getElementsByClassName 总是 返回一个元素集合，即使该集合只有一个元素（因为您可以拥有多个具有相同类的元素）。 您无法读取整个集合的 value 属性--因此，您需要仅获取集合的第一个元素（或查找其他确保获取正确元素的方法），并获取该特定元素的 value 属性。 - Woodrow Barlow

Answer 2

你可以使用 jQuery 选择器。

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
    $(document).ready(function() {
      $('.buy-btn').click(function(){
          $(this).parent('form').submit();
      });
    });
</script>

<form class="buy-form">
   <label>Quantity:</label>
   <input type="text" class="num-item" />
   <button class="buy-btn">Add to Cart</button>
</form>

上面的代码将为具有CSS类buy-btn的每个HTML元素设置一个函数。 您可以使用jQuery的parent、children、prev、next或find函数选择任何内容。

当然，这只是我在这里展示的基本示例，再举一个简单的例子：

$('.buy-btn').click(function(){
   $(this).parent('form').submit();
   //var itemCount = $('#item-count').html();
   //itemCount++;
   //$('#item-count').html(itemCount);
   var numItem = $(this).prev('.num-item').val();
   $('#item-count').html(numItem);
});

- yves

Answer 3

不幸的是，您需要在JavaScript中循环遍历元素并为每个元素分配函数，但是您可以使用一些querySelector方法使其更简单：

window.onload = function() {
    var getCart = document.getElementById('item-count');
    var forms = document.querySelectorAll('.buy-form');
    var numItems = 0;
    var isNum = function(n) {
        return(!isNaN(parseFloat(n)) && isFinite(n));
    };
    var handler = function(e) {
        (e || event).preventDefault();
        var getInput = this.querySelector('.num-item').value;
        if(isNum(getInput)) {
            numItems += parseInt(getInput);
            getCart.innerHTML = numItems;
            this.reset();            
        } else {
            alert("Please enter a valid number");
        }
    };
    for(var i = 0, len = forms.length; i < len; i++) {
        forms[i].addEventListener('submit', handler);
    }
};

- faino