Question

我正在创建此应用程序，您可以根据用户选择获得所选项目的总价。我必须得到每行结果的总和，每行实际由2个选择（ID /项）和一个数量输入组成。事实上，我添加了一个额外的功能，您可以根据用户不断添加行。因此，我需要创建一个循环函数来检查每一行选择并将所有这些结合起来并将结果抛给html - 这就是我被困的地方。

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

非常感谢您的帮助。

为了更好地为您解释，请查看它的外观以及jsfiddle：

<div class="complrow">
    <div class="span4">ID</div>
    <div class="span4">Fruit</div>
    <div class="span4">Quantity</div>    
</div>
<div class="complrow">
    <button id="addrow">Add Rows</button><br/>
</div>
<button id="thisisit">Check!</button><br/>
<div>
   <p>Total Price:</p><br/>
   <p id="try"></p>
</div>

带一点CSS：

#try{
  margin-top:20px;
  border: 1px solid black;
}

.span4{
    display: inline-block;
        width: 100px;
        margin-left: 10%;
}

这里是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');
        }
    });
});

Answer 1

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

我已经创建了一个名为getFruitPrice(quantity, fruitName)的单独函数，该函数从results数组中获取其数量的水果价格。

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

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

在主要点击功能中，我只是保留一个包含项目总价的变量。当它遍历所有选择字段时，它将添加从getFruitPrice()获得的价格。

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

主要点击事件

$('#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);
});

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

https://jsfiddle.net/ws01muyL/43/

Answer 2

您在添加数量时只需使用parseInt：

sumofquantity += parseInt(quantity);

检查这个

https://jsfiddle.net/523xp44u/2/

循环播放html选择并输入

2 个答案: