只需单击一次即可将多个项目添加到购物车

Question

我有一个购物网站，当查看某些产品时，我给买家在同一时间添加其他相关项目的选择。每个相关产品都有自己的数量输入，名称为"quantity1“、"quantity2”等。

我想要做的是计算我的页面上有多少输入名称包含文本" quantity "，然后在这个数量上创建一个循环，并通过AJAX添加每个数量大于零的项目。

我对此非常陌生，所以不太确定我在做什么，并且已经尝试了几个小时来寻找解决方案，但总是碰壁。

我已经完成了最简单的部分，即使用下面的代码计算“数量”输入的数量：

var len = $('input[id^=quantity]').length;

这是成功的，但我在AJAX调用中的循环中苦苦挣扎，我尝试了许多不同的代码，但都不起作用。我实际上想做以下几件事：

function addItemToCart(variant_id, qty) {
 var len = $('input[id^=quantity]').length;
  data = {"id": $('#quantity'+loopnumber).parent().attr('name'),
         "quantity": parseFloat($("#quantity"+loopnumber).val()),
         }
  jQuery.ajax({
   type: 'POST',
   url: '/cart/add.js',
   data: data,
   dataType: 'json',
   success: function() 

我知道我没有把for循环代码放在这里，但那是因为我不知道把它放在哪里，我希望有人能帮助我。数据字段中的"loopnumber“文本将引用循环的当前迭代，因此迭代1将查找输入名称"quantity1”并查找其各自的值，将其发送到AJAX购物车，并在成功循环时遍历下一个数量值，直到达到for循环限制。在这一点上，它然后重定向到购物车。

我知道我可以在没有循环的情况下简单地做以下事情，但在我看来这是浪费的：

var quantity1 = parseFloat($("#quantity1").val());
var qty1 = $('#quantity1').parent().attr('name');
var quantity2 = parseFloat($("#quantity2").val());
var qty2 = $('#quantity2').parent().attr('name');
var quantity3 = parseFloat($("#quantity3").val());
var qty3 = $('#quantity3').parent().attr('name');
var quantity4 = parseFloat($("#quantity4").val());
var qty4 = $('#quantity4').parent().attr('name');
var quantity5 = parseFloat($("#quantity5").val());
var qty5 = $('#quantity5').parent().attr('name');

data = {
  "id": prodid,
  "quantity": mainquantity,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty1,
  "quantity": quantity1,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty2,
  "quantity": quantity2,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty3,
  "quantity": quantity3,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty4,
  "quantity": quantity4,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() { 
    
     data = {
       "id": qty5,
  "quantity": quantity5,
  
}
jQuery.ajax({
  type: 'POST',
  url: '/cart/add.js',
  data: data,
  dataType: 'json',
  success: function() {  window.location.href = '/cart'
    ; 
  }
});
    ; 
  }
});
  }})}})}})}})};

任何帮助都是非常感谢的！谢谢乔恩

Answer 1

我已经整理好了，我把事情搞得太复杂了。我所要做的就是创建一个数组，这样就不必创建一个无法工作的AJAX循环。一次将所有项目添加到AJAX购物车中也要快得多。