Question

我正在研究一个项目并且无法解决这个问题。我需要做的是有两个单独的文本框来输入值，一个可用单位的下拉菜单，以及一个可用食物的下拉菜单。根据选择，我想在输出结果的页面右侧进行比较计算。这是我到目前为止的代码：

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],
  ["Soda", "fl oz", 10, 1.46, 0.45, 0, 1.944, 10, 13, 8],
  ["Bread", "slice", 50, 5.65, 2.83, 0, 1.109, 19, 18, 1],
  ["Flour", "cup", 50, 5.65, 2.83, 0, 1.109, 19, 18, 1]
]

function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    calories: [data[2], ''],
    protein: [data[3], 'g'],
    fat: [data[4], 'g'],
    saturatedFat: [data[6], 'g'],
    sugar: [data[5], '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))
}

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

需要注意的是，我对这两个值只有一个文本框，但我需要为每个项目设置一次（所以2）。就单位的下降而言，我需要有它，以便只有某些单位可用于某些物品（即，如果物品以盎司为单位测量，它应该有磅，克，千克，如果它是液体盎司，它应该是在杯子，加仑，升）。我当前的代码也输出每个项目的值然后进行比较，但我只需要输出比较数据。

再次感谢您的帮助，非常感谢。

从单位转换的下拉菜单中输出两个数组值的差异？

0 个答案: