我有一系列食品营养成分的数据库。我要做的就是选择两个项目，结果是第一项和第二项的值之差。例如，如果第一项是72卡路里，而另一项是50卡路里，我希望输出说“更多22卡路里，x更多克蛋白质，y更多脂肪，等等”。如果物品被颠倒了，我希望它少22卡路里，以此类推。
这是我到目前为止的代码。我能够输出每个项目的值，但是还没有弄清楚如何输出差异：
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 />");
});
}<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>希望对此有指导。谢谢一群！
最佳答案
我花了一些时间处理您的代码，并设法提出了一个解决方案。我添加的逻辑有些混乱，因此，如果您有任何疑问，请告诉我。我可能稍后再回来修改我编写的代码，以使其更加清晰。我尽力不更改原始的stocks数据结构，因为看起来您正在接收该格式的数据，但是如果可以更改它，我建议您这样做，因为stock[17]或。
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;
}<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>
<label>
Servings:
<input type="number" id="numberOfStocks" value="1" min="0" />
</label>
<div>
<div class="side">
<h2>First Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
<div class="side">
<h2>Second Item<span class="servingUnit"></span>:</h2>
<select class="selectStock">
<option value="-1">Pick a food!</option>
</select>
<br>
<br>
<div class="result"></div>
</div>
<div class="comparison">
<h2>Comparison:</h2>
<br>
<br>
<div class="result"></div>
</div>
</div>
</body>