Question

我有一个食品项目营养成分数据库。我要做的就是选择2个项目的结果是第一个项目和第二个项目的值之间的差异。例如，如果第一项是72卡路里，另一项是50卡路里，我希望输出更多卡路里，更多克蛋白质，更多克脂肪等等＃34;如果物品被颠倒了，我希望它能减少22卡路里，依此类推。

这是我到目前为止的代码。我能够输出每个项目的值，但还没有弄清楚如何输出差异：

＆＃13;

var stocks = [
  ["Beef (80/20) raw","oz",72,4.85,5.65,0,2.142,19,20,4],
  ["Beef (90/10) raw","oz",50,5.65,2.83,0,1.109,19,18,4]]
  
$(".selectStock").each(function (){
  for (var i = 0, len = stocks.length; i < len; i++) {
 $("<option>").html(stocks[i][0]).attr("value", i).appendTo(this);
}
});

function r2d (i) {
  return Math.round(i * 100) / 100
}

$(".selectStock").change(updateAmount);
$("#numberOfStocks").on('keyup', updateAmount);

function updateAmount() {
  $(".selectStock").each(function () {
    index = Number($(this).val());
    if (isNaN(index)) {
      return;
    }
    amt = Number($("#numberOfStocks").val());
    if (isNaN(amt) || amt == 0) {
      amt = stocks[index][9];
    }
    $(this).nextAll(".result:first").html("")
      .append((r2d(amt*stocks[index][2])).toLocaleString() + " calories<br />")
      .append((Math.round(stocks[index][3] * amt * 100)/100).toLocaleString() + " g of protein<br />")
    .append((Math.round(stocks[index][4] * amt * 1000)/1000).toLocaleString() + " g of fat <br />")
    .append((Math.round(stocks[index][5] * amt * 100)/100).toLocaleString() + " g of saturated fat <br />")
    .append((Math.round(stocks[index][6] * amt * 100)/100).toLocaleString() + " g of sugar <br />")
    .append((Math.round(stocks[index][7] * amt * 100)/100).toLocaleString() + " mg of sodium <br />")
    .append((Math.round(stocks[index][8] * amt * 100)/100).toLocaleString() + " mg of cholesterol <br />");
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=10px, initial-scale=1.0">
</head>

<body>

  <input value = "" type="text" id="numberOfStocks" />
  <div style="display:block;">
    <div class="side">
      <h2>ounce of: </h2>
    <select class="selectStock">
      <option>Pick a food!</option>
    </select>
    <br>
    <br>
    <div class="result"></div>
    </div>
    <div class="side">
      <h2>vs ounce of:</h2>
    <select class="selectStock">
      <option>Pick a food!</option>
    </select>

    <br>
    <br>
    <div class="result"></div>
</div>
  </div>
</body>

＆＃13;

非常感谢这方面的指导。非常感谢！

Answer 1

我在JS小提琴上制作了你的问题的简化版本，如果这里的格式/链接错误，mod可以纠正：

[1]：https://jsfiddle.net/xnymo46d/17/ JS小提琴代码

// Create food objects to hold info about the food
var food = [];
food[0] = { name: "Beef", calories:"70", protein:"25" }
food[1] = { name: "Chicken", calories:"80", protein:"30" }
food[2] = { name: "Steak", calories:"150", protein:"20" }

// Store food in dropdowns on load
for (i = 0; i < food.length; ++i) 
    $("select[name='food[]']").append('<option value="' + i + '">' + food[i].name + '</option>');

// Call a function to calculate differences when options are changed
$('select').on('change', function() {
  getDifference();
})

function getDifference()
{
  // Get the selected food options
  var foodOptions = $("select[name='food[]']").map(function(){return $(this).val();}).get();
  var calories = [];
  var protein = [];

  for (i = 0; i < foodOptions.length; ++i)
  {
    var thisIndex = $("select[name='food[]']").eq(i).val();
        calories[i] = food[thisIndex].calories;
    protein[i] = food[thisIndex].protein;
  }

  // calculate difference between calories
  var differenceCalories = calories[0] - calories[1];
  var differenceProtein = protein[0] - protein[1];

    if (!differenceCalories)
    $("#result-calories").html('The calories are the same between your selected food items');
  else if (differenceCalories > 0)
    $("#result-calories").html('There are ' + differenceCalories + ' more calories in your first selection than second');
  else
    $("#result-calories").html('There are ' + (differenceCalories * -1) + ' less calories in your second selection than first');

        if (!differenceProtein)
    $("#result-protein").html('The protein is the same between your selected food items');
  else if (differenceProtein > 0)
    $("#result-protein").html('There are ' + differenceProtein + ' more grams of protein in your first selection than second');
  else
    $("#result-protein").html('There are ' + (differenceProtein * -1) + ' less grams of protein in your second selection than first');
}

我认为如果您将食物项目变成JS 对象，那么您的代码将更容易解释/使用。这样，您可以为每个食物项目（例如卡路里，蛋白质等）提供标识符。因为现在，你对股票（食品）的代码非常混乱;你拥有所有这些数字并且不知道它们代表什么（我假设其他因素包括脂肪，钠，碳水化合物等）。也许你这样做，但我不会，甚至为了你的缘故，它看起来很难/混乱。在创建了一个对象数组之后，然后我循环遍历所有这些对象并将下摆附加到下拉列表中，类似于您的操作。然后我创建了一个函数，在下拉列表更改时循环显示所有下拉列表选项，加载所选值并收集所选的食物项目。（你甚至可以将它绑在一个按钮或其他东西上）。然后我将卡路里和蛋白质储存在不同的阵列中并比较两者。这一步可以任何你想要的方式完成;你甚至可以收集这两种食物。

有很多不同的方法可以解决这个问题。这比我做的那样粗糙;您可以使用更有效/优化的方式来存储有关食品（库存）的数据，并且您可以通过下拉菜单动态加载，而无需编写冗余代码。我也这样做的方式，你可以使用无限量的下拉菜单（如果你想比较4,6或甚至100种不同的食物）。当然，您必须修改计算差异的方式。无论如何，希望有助于引导您朝着正确的方向前进。

Answer 2

我用你的代码玩了一下，并设法提出了一个解决方案。我添加的逻辑有点令人费解，所以如果您有任何疑问，请告诉我。我可能会稍后回来并修改我编写的代码，以使其更清晰一些。我尽力不改变原来的stocks数据结构，因为看起来你正在接收那种格式的数据，但如果你可以改变它，我建议你这样做，因为{{1}没有任何语义}或stock[17]。

stock[4]

var stocks = [
  ["Beef (80/20) raw", "oz", 72, 4.85, 5.65, 0, 2.142, 19, 20, 1],
  ["Beef (90/10) raw", "oz", 50, 5.65, 2.83, 0, 1.109, 19, 18, 1],
  ["Milk", "fl oz", 10, 1.46, 0.45, 0, 1.944, 10, 13, 8] // Made up values
]

function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    calories: [data[2], ''],
    protein: [data[3], 'g'],
    fat: [data[4], 'g'],
    saturatedFat: [data[5], 'g'],
    sugar: [data[6], 'g'],
    sodium: [data[7], 'mg'],
    cholesterol: [data[8], 'mg'],
    unitsPerServing: data[data.length - 1]
  }
}

stocks = stocks.map(Stock)

var $selects = $('.selectStock')
var $quantity = $('#numberOfStocks')
var $comparisonResult = $('.comparison .result')

$selects.each(function() {
  $(this).append(stocks.map(function(stock, i) {
    return new Option(stock.name, i)
  }))
})

function format(data, multiplier, digits) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString()
  return data.join(' ')
}

function stockFacts(stock, quantity) {
  return [
    format(stock.calories, quantity, 2) + ' calories<br>' +
    format(stock.protein, quantity, 2) + ' of protein<br>' +
    format(stock.fat, quantity, 3) + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2) + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2) + ' of sugar<br>' +
    format(stock.sodium, quantity, 2) + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2) + ' of cholesterol<br>'
  ]
}

$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}

function updateAmount() {
  var quantity = +$quantity.val() 
    
  $selects.each(function() {
    var $result = $(this).nextAll('.result').empty()
    var $amount = $(this).prev().find('.servingUnit').empty()
    var stock = getStock(this)
    if (!stock) return
    var amount = quantity * stock.unitsPerServing
    
    $amount.text(' (' + amount + ' ' + stock.servingUnit + ')')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var diff = {}
  Object.keys(selected[0]).forEach(function (k) {
    if (/^(name|servingUnit|unitsPerServing)$/.test(k)) return
    var first = selected[0][k].slice()
    var second = selected[1][k].slice()
    first[0] *= selected[0].unitsPerServing
    second[0] *= selected[1].unitsPerServing
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'more' : 'less']
  })
  $comparisonResult.html(stockFacts(diff, quantity))
}

.side,
.comparison {
  width: 33.333%;
  display: inline-block;
  float: left;
}

从下拉菜单中输出两个数组值的差异（Javascript）

2 个答案: