Question

我正在尝试制作类似电子商务的网页（用于练习），其中点击任何按钮将按输入元素上指定的数量（数量）更新购物车价值。到目前为止，我只能从第一个表单更新购物车，因为当我尝试使用循环在每个表单上分配函数时，购物车更新一毫秒然后返回到零。我认为它是因为范围。我知道有一种更简单的方法可以在不为每个Date

手动分配函数的情况下执行此操作

JS

<p:calendar ... maxdate="#{now}" />

HTML 购物车：

document.forms[n]

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

 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");
      }
  }

Answer 1

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

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

在事件监听器功能中，您将引用以this提交的表单。

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

您之前的版本每次都会覆盖购物车的内容。这可能是故意的，取决于你是否每个项目都有一个“篮子”或整体（这个问题中不明确）。因此，我没有将numItems初始化为零，而是将其初始化为购物车中当前的商品数量。
考虑使用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>

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

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

JS - 将相同的函数附加到许多html表单

3 个答案: