Javascript 在html中循环选择和输入

我正在创建这个应用程序，您可以从中获得根据用户选择的所有项目的总价。我必须得到每一行结果的总和，其中每一行实际上由2个选择ID/项和一个数量输入组成。问题是，我添加了一个附加函数，您可以根据用户不断添加行。因此，我需要创建一个循环函数来检查每一行的选择，并将所有这些进行汇总，然后将结果抛出到html中——这就是我遇到的问题

顺便说一句，所选项目的价格将基于变量数组。获取价格后，将其乘以数量，然后得到一行的总价。总价是包含完整数据的所有行的总和

非常感谢你的帮助

为了更好地向您解释，下面是它的外观，下面是一个：

以下是js：

var firstselector = '<select class="firstselectorclass">'+
  '<option value=""></option>'+
  '<option value="1">1</option>'+
  '<option value="2">2</option>'+
  '<option value="3">3</option>'+
  '<option value="4">4</option>'+
  '</select>';

var secondselector =  '<select class="secondselectorclass">'+
  '<option value=""></option>'+
  '<option value="apple">Apple</option>'+
  '<option value="lemon">Lemon</option>'+
  '<option value="orange">Orange</option>'+
  '<option value="banana">Banana</option>'+
  '</select>';

var completerow = '<div class="complrow"><div class="span4">'+ firstselector + '</div><div class="span4">'+ secondselector + '</div><div class="span4"><input type="number" min="0" id="actqty" class="actqtyclass" placeholder="0" style="max-width:50px;"></div></div>';

var result = [{"qty":"1","fruit":"apple","price":"19.00"},
              {"qty":"1","fruit":"lemon","price":"29.00"},
              {"qty":"1","fruit":"orange","price":"39.00"},
              {"qty":"1","fruit":"banana","price":"49.00"},
              {"qty":"2","fruit":"apple","price":"20.00"},
              {"qty":"2","fruit":"lemon","price":"30.00"},
              {"qty":"2","fruit":"orange","price":"40.00"},
              {"qty":"2","fruit":"banana","price":"50.00"},              
              {"qty":"3","fruit":"apple","price":"21.00"},
              {"qty":"3","fruit":"lemon","price":"31.00"},
              {"qty":"3","fruit":"orange","price":"41.00"},
              {"qty":"3","fruit":"banana","price":"51.00"},
              {"qty":"4","fruit":"apple","price":"22.00"},
              {"qty":"4","fruit":"lemon","price":"32.00"},
              {"qty":"4","fruit":"orange","price":"42.00"},
              {"qty":"4","fruit":"banana","price":"52.00"}
             ];

function clearResults()
{
    $('#try').html('');
}

function addAnotherRow(){
     var lastRow = $(".complrow:last");
     $(lastRow).before(completerow);      
     clearResults();
}

$(document).ready(function() {

    addAnotherRow();
    addAnotherRow();
    addAnotherRow();
    clearResults();

    $("#addrow").click(function(){ 
            addAnotherRow(); 
    });

    $('#thisisit').click(function(){
                clearResults(); 
        var errorFound = false;

        //Loop through rows
        var complrowcombination = new Array();
        var sumofquantity = 0;

        $('.complrow').not(':first').not(':last').each(function (i, row)
        {
          var numberselected = $(row).find('.firstselectorclass').val();
          var fruitselected = $(row).find('.secondselectorclass').val();
          var quantity = $(row).find('.actqtyclass').val();             

          sumofquantity += quantity;     

          var thiscomplrowCombination = new Array();
          thiscomplrowCombination[0] = numberselected;
          thiscomplrowCombination[1] = fruitselected;
          thiscomplrowCombination[2] = quantity;

          //push this each line of array to the overall array
          if(quantity > 0)
          {
             complrowcombination.push(thiscomplrowCombination);
          }

        });       

        //Check Overall Sum
        if(sumofquantity == 0)
        {
          alert("You must enter at least one row with quantity greater than 0!");
          return;
        }

        //If no error, get data
        if(errorFound)
        {
          alert("Error found, cannot continue...");
          return;
        } else
        {
          $('#try').html('no error found up to this point');
        }
    });
});

---

我不确定代码中的ID select字段引用的是什么。在我的解决方案中，我只使用数量字段和水果名称。如果这不是你想要的，请告诉我

我制作了一个单独的函数，名为GetFrootPriceQuantity，FrootName，它从结果数组中获取水果数量的价格

获取水果价格-根据水果的数量和名称获取水果价格

在主单击函数中，我只保留一个变量，该变量保存项目的总价格。当它在所有选择字段中循环时，它将添加从getFruitPrice获得的价格

getfuturprice将返回null；因此，如果您想要设置用户必须输入大于1的数量的要求，则必须在此处完成

主点击事件

我只是提醒总价格作为一个例子

---

添加数量时只需使用parseInt，如下所示：

sumofquantity += parseInt(quantity); 

检查这个

---

如果数量大于5，它就会崩溃。@Ozan它不会崩溃吗？它只是忽略了这一点，不向总数中添加任何内容。无论如何，我已经更新了小提琴，但是OP没有指定如果输入了无效数量会发生什么。是的，很抱歉，你是对的，它只是不更新总数。这就是我的意思。我也不明白OP的问题是什么。我的解决方案是根据水果过滤结果，但因为有多个水果同名，所以没有意义。我的方法是var price=result.filterx=>x.fruit==fruitselected.mapx=>x.price；因此，根据水果的不同，你会得到价格。因为我对数量没有限制，所以我应该删除这部分代码，对吗？&&数量<5。。。顺便说一句，要得到价格，你需要两个选择器的值，第一个ID和水果本身。假设ID代表市场A、B、C等。这就是价格因市场而异的原因。我应该如何调整getFruitPrice函数来实现这一点？谢谢大家!@Ken尽管你的代码没有市场。ID在结果数组中指的是什么？每个市场是否应该有多个阵列？如果数量大于结果数组中指定的值，会发生什么情况？别忘了单击勾号将问题标记为已回答。您的解决方案返回一个NaN。@Ozan我已经更新了fiddle以检查大小写ohh，所以这就是将值转换为整数的方式。。谢谢

var firstselector = '<select class="firstselectorclass">'+
  '<option value=""></option>'+
  '<option value="1">1</option>'+
  '<option value="2">2</option>'+
  '<option value="3">3</option>'+
  '<option value="4">4</option>'+
  '</select>';

var secondselector =  '<select class="secondselectorclass">'+
  '<option value=""></option>'+
  '<option value="apple">Apple</option>'+
  '<option value="lemon">Lemon</option>'+
  '<option value="orange">Orange</option>'+
  '<option value="banana">Banana</option>'+
  '</select>';

var completerow = '<div class="complrow"><div class="span4">'+ firstselector + '</div><div class="span4">'+ secondselector + '</div><div class="span4"><input type="number" min="0" id="actqty" class="actqtyclass" placeholder="0" style="max-width:50px;"></div></div>';

var result = [{"qty":"1","fruit":"apple","price":"19.00"},
              {"qty":"1","fruit":"lemon","price":"29.00"},
              {"qty":"1","fruit":"orange","price":"39.00"},
              {"qty":"1","fruit":"banana","price":"49.00"},
              {"qty":"2","fruit":"apple","price":"20.00"},
              {"qty":"2","fruit":"lemon","price":"30.00"},
              {"qty":"2","fruit":"orange","price":"40.00"},
              {"qty":"2","fruit":"banana","price":"50.00"},              
              {"qty":"3","fruit":"apple","price":"21.00"},
              {"qty":"3","fruit":"lemon","price":"31.00"},
              {"qty":"3","fruit":"orange","price":"41.00"},
              {"qty":"3","fruit":"banana","price":"51.00"},
              {"qty":"4","fruit":"apple","price":"22.00"},
              {"qty":"4","fruit":"lemon","price":"32.00"},
              {"qty":"4","fruit":"orange","price":"42.00"},
              {"qty":"4","fruit":"banana","price":"52.00"}
             ];

function clearResults()
{
    $('#try').html('');
}

function addAnotherRow(){
     var lastRow = $(".complrow:last");
     $(lastRow).before(completerow);      
     clearResults();
}

$(document).ready(function() {

    addAnotherRow();
    addAnotherRow();
    addAnotherRow();
    clearResults();

    $("#addrow").click(function(){ 
            addAnotherRow(); 
    });

    $('#thisisit').click(function(){
                clearResults(); 
        var errorFound = false;

        //Loop through rows
        var complrowcombination = new Array();
        var sumofquantity = 0;

        $('.complrow').not(':first').not(':last').each(function (i, row)
        {
          var numberselected = $(row).find('.firstselectorclass').val();
          var fruitselected = $(row).find('.secondselectorclass').val();
          var quantity = $(row).find('.actqtyclass').val();             

          sumofquantity += quantity;     

          var thiscomplrowCombination = new Array();
          thiscomplrowCombination[0] = numberselected;
          thiscomplrowCombination[1] = fruitselected;
          thiscomplrowCombination[2] = quantity;

          //push this each line of array to the overall array
          if(quantity > 0)
          {
             complrowcombination.push(thiscomplrowCombination);
          }

        });       

        //Check Overall Sum
        if(sumofquantity == 0)
        {
          alert("You must enter at least one row with quantity greater than 0!");
          return;
        }

        //If no error, get data
        if(errorFound)
        {
          alert("Error found, cannot continue...");
          return;
        } else
        {
          $('#try').html('no error found up to this point');
        }
    });
});

function getFruitPrice(quantity, fruitName) {
    for (var index in result) {
        var fruit = result[index];

        if (fruit.qty == quantity && fruit.fruit.toLowerCase() == fruitName.toLowerCase()) {
            return parseFloat(fruit.price);
        }
    }

    return null;
}

$('#thisisit').click(function(){
    clearResults(); 

    var totalPrice = 0;

    $('.complrow').not(':first').not(':last').each(function (i, row)
    {
        // var numberselected = $(row).find('.firstselectorclass').val();
        var fruitselected = $(row).find('.secondselectorclass').val();
        var quantity = $(row).find('.actqtyclass').val();   

        if (quantity > 0 && quantity < 5) {
            var fruitPrice = getFruitPrice(quantity, fruitselected);

            if (fruitPrice != null) {
                totalPrice += fruitPrice;
            }
        } else if (fruitselected) {
            alert("One of the items has an invalid quantity!");
        }
    });

    alert(totalPrice);
});

sumofquantity += parseInt(quantity);