javascript - 快速格式调整-调整Javascript中的文字位置

标签 javascript jquery html css

我试图自己解决这个问题，但我的代码写得太复杂了，我不知道如何改变它。

我的代码:

var  stocks= [
  ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Beef (90/10) raw","oz",115.4451262,3.293742347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Chicken breast","oz",32.39053977,0.3923520408,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
  ["Chicken thighs/legs","oz",32.39053977,0.3923520408,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
  ["Milk (whole)","fl oz",7.638924987,0.146234933,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Milk (2%)","fl oz",7.638924987,0.06133157758,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
  ["Pizza (cheese)","slice",42,0.976332736,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
  ["Ice Cream","cup",32.59312,0.6191784396,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
  ["Milk (skim)","fl oz",7.638924987,0.05948052127,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Eggs (large)","each",43.13341461,0.5215603261,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
  ["Lamb","oz",78.125,4.010117347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
  ["Cheese (hard)","slice (oz)",37.44571072,1.35234933,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
  ["Yogurt","oz",5.833333333,0.09395993304,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
  ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08285194565,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
  ["Chocolate","oz",127.316,0.1863325866,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
  ["Cacao","oz",179.739,0.625,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
  ["Salmon (farmed)","oz",0.498125,0.56925,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
  ["Tuna (canned in oil)","oz",0.498125,0.1197485281,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
  ["Mayo","oz",14.41309121,0.1237135815,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
  ["Pulled Pork raw","oz",44.84498316,0.7763814526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
  ["Butter (salted)","oz",41.58720633,0.5919085938,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
  ["Soy Burger","oz",21.8,0.048125,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
  ["Vegan Nuggets (soy)","oz",21.8,0.048125,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
  ["Soymilk (original)","fl oz",2.319532348,0.02445449777,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
  ["Tofu","oz",25.25,0.09625,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
  ["Tempeh","oz",12.383064,0.0230998152,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
  ["Mixed Nuts","oz",18.72285536,0.18425,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
  ["Bread","slice",9.735884788,0.1530147137,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
  ["Lentils","oz",30.3684714,0.07425,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
  ["Black Beans","oz",30.3684714,0.141625,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
  ["Tomato Sauce","oz",3.13704,0.09375,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
  ["Pinto Beans","oz",30.3684714,0.141625,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
  ["French Fries","oz",2.9337142,0.0417335921,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
  ["Peanut Butter","oz",36,0.2145,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
  ["Olive Oil","oz",21.77842536,0.2306145384,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
  ["Banana","medium",6.440662244,0.1763699536,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
  ["Mixed vegetables","oz",2.41150377,0.125,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
  ["Nutritional Yeast","g",0.08506329224,0.00706361088,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
  ["Rice (white)","oz",25.46308329,0.34375,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
  ["Potatoes","oz",1.872285536,0.03575,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
  ["Vegetable Oil","oz",17.70433203,0.125,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
  ["Wheat (flour)","cup",40.44136758,0.1235081329,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25  ],
  ["Margarine","oz",9.915624199,0.06125,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
  ["Corn Syrup","fl oz",11.15931776,0.01728062914,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
  ["Sugar","oz",11.23371322,0.01503093504,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
  ["Corn (grain)","oz",6.74022793,0.0104375,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
  ["Soda","fl oz",10.64647779,0.02494335117,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
]
function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    water: [data[2], ''],
    carbon: [data[3], ''],
    calories: [data[4], ''],
    protein: [data[5], 'g'],
    fat: [data[6], 'g'],
    saturatedFat: [data[8], 'g'],
    sugar: [data[7], 'g'],
    sodium: [data[9], 'mg'],
    cholesterol: [data[10], 'mg'],
    lives: [data[11], ''],
    feed: [data[12], ''],
    meals: [data[13], ''],
    land : [data[14], ''],
    healthcare : [data[15], ''],
    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,a) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
    console.log(data);
  if(a=="bad" && data[2]==" + "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]==" - "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]==" - "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]==" + "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]=="use"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]=="save"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]=="save"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]=="use"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  return data.join(' ')
}

function format2(data, multiplier, digits,a) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
    console.log(data);
  if(a=="use" && data[2]==" + "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="use" && data[2]==" - "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="emit" && data[2]=="use"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="emit" && data[2]=="save"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="consumegood" && data[2]=="more"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  if(a=="consumegood" && data[2]=="less"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  return data.join(' ')
}
function stockFacts(stock, quantity) {
  return [
    format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
    format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
    format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
    format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
    format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>' +
    format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>' +
    "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
  ]
}

function stockFactsEnv(stock, quantity) {
  return [
    format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
    format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
    format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>'
  ]
}

function stockFactsHealth(stock, quantity) {
  return [
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
    format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
    "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
  ]
}

function stockFactsSocial(stock, quantity) {
  return [
    format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
    format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>'
  ]
}

function stockFacts2(stock, quantity) {
  return [
    format(stock.water, (quantity/50), 2,"bad","use") + ' bathtubs worth of water used<br>' +
    format(stock.carbon, (quantity*23.6/(20)), 2,"bad","emit") + ' miles worth of carbon dioxide driven in a car<br>' +
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
   format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
   format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
   format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
   format(stock.lives, quantity, 5,"bad","save") + ' animal lives needed <br>' +
   format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed required<br>' +
    "Be able to feed " + format(stock.meals, (quantity/365/3), 2,"bad","preserve") + ' people for an entire year<br>' +
   format(stock.land, (quantity/43560), 2,"bad","require") + ' acres of land needed<br>' +
  "$"+format(stock.healthcare, quantity, 2,"bad","save") + 'in projected healthcare costs<br>'
  ]
}

function stockFacts3(stock, quantity) {
  return [
    format(stock.water, (quantity/660430), 2,"bad","use") + ' Olympic swimming pools worth of water<br>' +
    format(stock.carbon, (quantity/12000), 2,"bad","emit") + ' cars worth of carbon dioxide<br>' +
   format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    "Be able to feed " + format(stock.meals, (quantity/3/365), 2,"bad","preserve") + ' people for an entire year<br>' +
    format(stock.land, (quantity/43560), 2,"bad","require") + ' acres of land required<br>' +
   "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs'
  ]
}

$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 + ') of:')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var difference = {};
  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
    difference[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'save' : 'use'];
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? ' + ' : ' - ']
  })
  
  $comparisonResult.html(stockFacts(diff, quantity));
	$('#env_result').html(stockFactsEnv(diff, quantity));
  $('#health_result').html(stockFactsHealth(diff, quantity));
  $('#soc_result').html(stockFactsSocial(diff, quantity));
	$('#year_result').html(stockFacts2(diff, quantity*365));
  $('#US_result').html(stockFacts3(diff,quantity*323148587));
}


$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}
.main-container{
  
  display: flex; 
  flex-wrap: wrap;
}

*{
    padding : 0;
      margin : 0;
}
body{
  height : 100vh;
  background-color: #F8F8FF;
}

.topnav {
  height: 50px;
  width: 100%;
  color: white;
  background-color: #173;
    overflow: hidden;
  text-align: center;
  
}


/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.box-1{
  width : 25%;
  margin-left: 5%;
  display : block;
  text-align : center;
  font-size : 1.5em;
  
}

.box{
  width : 22%;
  display : block;
  text-align : center;
  font-size : 1.5em;
}

.box-2{
  width : 48%;
  margin-top: 1%;
  display : block;
    text-align : center;
  font-size : 1.5em;
}



@media screen and (max-width: 480px) {
.box{
display : block;
width : auto;

}

.box-2{
display : block;
width : auto;

}
}

.color-red{
color:red;
background:transparent}
.color-green{
color:green;
background:transparent}


<style type="text/css">
 
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
background: transparent;
}
 
</style>

<style type="text/css">
/* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */
@media screen and (max-width: 980px) {
    .a2a_floating_style.a2a_vertical_style { display: none; }
}
</style>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
  </head>

  <body>
    <div class="topnav" id="myTopnav">
      <a href="#ingredient">Ingredient Calculator</a>
  <a href="#meal">Meal Calculator</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#sources">Sources</a></div>
  <div class="main-container">
      <div class="box-1"> 
      <label>
    Servings:
        <br>
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>
        <br>
        <h3>The impact of eating<span class="servingUnit"></span></h3>
        <select class="ui fluid search dropdown selectStock">
          <option value="-1">Pick a food!</option>
        </select>
        <h3> 
          <br>
          vs.
        <span class="servingUnit"></span></h3>
        <select class="selectStock">
          <option value="-1">Pick a food!</option>
        </select>
        <br>
        <h2></h2>
      </div>
      <div class="box"><i class="fa fa-car" style="color:#A9A9A9"></i> Environmental Impact:</h2><div id="env_result"></div></div>
      <div class="box"><i class="fa fa-heartbeat" style="color:#FF69B4"></i> Health Impact:</h2><div id="health_result"></div></div>
      <div class="box"><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDI5OC4zNDUgMjk4LjM0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjk4LjM0NSAyOTguMzQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTE4Ni42OTMsOTAuMjc0Yy0xMi4xNDQsMC0yMi4wMTIsOS44NjgtMjIuMDEyLDIyLjAwN2MwLDEyLjEzOCw5Ljg2OCwyMi4wMTIsMjIuMDEyLDIyLjAxMiAgICBjMTIuMTM2LDAsMjIuMDE2LTkuODc0LDIyLjAxNi0yMi4wMTJDMjA4LjcwOCwxMDAuMTQzLDE5OC44MjMsOTAuMjc0LDE4Ni42OTMsOTAuMjc0eiBNMTg2LjY5MywxMjMuNTM3ICAgIGMtNi4yMDYsMC0xMS4yNjEtNS4wNDItMTEuMjYxLTExLjI2MmMwLTYuMjA4LDUuMDQ0LTExLjI1NSwxMS4yNjEtMTEuMjU1YzYuMjA5LDAsMTEuMjY1LDUuMDQyLDExLjI2NSwxMS4yNTUgICAgQzE5Ny45NTMsMTE4LjQ5NSwxOTIuOTA3LDEyMy41MzcsMTg2LjY5MywxMjMuNTM3eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxjaXJjbGUgY3g9IjEwNS4yMzQiIGN5PSIxMTIuMjgxIiByPSIxMS4yNTYiIGZpbGw9IiM4YzQ2MzciLz4KCQk8cGF0aCBkPSJNMjkyLjQwNSwyMS4yMjRMMjY4Ljg4Nyw1LjE2NmMtMS41MTctMS4wMzctMy40NTMtMS4yMzEtNS4xNDktMC41MDRMMjMzLjM0OSwxNy42OUMyMzAuMTYzLDcuNDgzLDIyMC43NDEsMCwyMDkuNDk2LDAgICAgYy0xMS45NzksMC0yMi4wMDYsOC40NTctMjQuNDczLDE5LjcxN2gtNzEuOTQ2QzExMC42MDQsOC40NTcsMTAwLjU4MywwLDg4LjU5NywwYy0xMS4yMDgsMC0yMC42MDksNy40MzQtMjMuODIsMTcuNTg4ICAgIEwzNC42MTIsNC42NjJjLTEuNjgzLTAuNzIyLTMuNjI4LTAuNTM4LTUuMTUsMC41MDRMNS45NDQsMjEuMjI0Yy0yLjE4MSwxLjQ4OC0yLjk1NSw0LjM1MS0xLjgyNyw2Ljc0bDE0LjkxMSwzMS41NDEgICAgYzAuODkyLDEuODg3LDIuNzg0LDMuMDgxLDQuODU4LDMuMDgxaDIyLjcxMUw2MC4xNCw3MC4wM2wtOS4wNjgsMTE0LjcyOWMtMC43NjQsNS4zMDMtMS4xMTgsOS43OTUtMS4xMTgsMTQuMTQzICAgIGMwLDU0LjgzNCw0NC42MDksOTkuNDQ0LDk5LjQ0NCw5OS40NDRjNTQuODM4LDAsOTkuNDU4LTQ0LjYxLDk5LjQ1OC05OS40NDRjMC00LjM0OC0wLjM1NS04Ljg0LTEuMDgtMTMuNzk1bC05LjEyOS0xMTUuMzA3ICAgIGwxMy4xMDItNy4yMDJoMjIuNzFjMi4wODksMCwzLjk3OS0xLjIsNC44NTktMy4wODJsMTQuOTA5LTMxLjU0MUMyOTUuMzU1LDI1LjU3NSwyOTQuNTg5LDIyLjcyMiwyOTIuNDA1LDIxLjIyNHogTTIwOS40OTYsMTAuNzUxICAgIGM2LjAwNSwwLDExLjEzOSwzLjcxMywxMy4yNzYsOC45NjZoLTI2LjU0MUMxOTguMzUsMTQuNDY1LDIwMy40OSwxMC43NTEsMjA5LjQ5NiwxMC43NTF6IE0xMjcuMjQ1LDExMi4yODIgICAgYzAsMTIuMTM4LTkuODc1LDIyLjAxMi0yMi4wMTEsMjIuMDEyYy0xMi4xMzksMC0yMi4wMTMtOS44NzQtMjIuMDEzLTIyLjAxMmMwLTEyLjEzOSw5Ljg3NC0yMi4wMDcsMjIuMDEzLTIyLjAwNyAgICBDMTE3LjM3MSw5MC4yNzQsMTI3LjI0NSwxMDAuMTQzLDEyNy4yNDUsMTEyLjI4MnogTTg4LjYwMiwxMC43NTFjNi4wMDUsMCwxMS4xNCwzLjcxMywxMy4yNzMsOC45NjZINzUuMzI2ICAgIEM3Ny40NiwxNC40NjUsODIuNTkxLDEwLjc1MSw4OC42MDIsMTAuNzUxeiBNMjcxLjA1LDUxLjg0MWgtMjAuNjk0Yy0wLjkwNiwwLTEuOCwwLjIyNi0yLjU4MSwwLjY2N2wtMTcuMzYsOS41NDEgICAgYy0xLjg0OSwxLjAxLTIuOTM1LDMuMDI2LTIuNzY3LDUuMTM5bDkuNDQzLDExOS4wOTJjMC42ODMsNC43OTksMS4wMTMsOC44MDksMS4wMTMsMTIuNjIxYzAsNDguOTI0LTM5Ljc5LDg4LjcwMy04OC43MDcsODguNzAzICAgIGMtNDguOTE2LDAtODguNjk0LTM5Ljc3OS04OC42OTQtODguNzAzYzAtMy44MTIsMC4zMjMtNy44MjIsMS4wNDItMTIuOTU2bDEuOTQyLTI0LjUxbDYuNzc3LDUuMDY2ICAgIGMwLjE3MywwLjEyLDAuMzQ0LDAuMjQxLDAuNTI3LDAuMzQxYzAuODk3LDAuNTE0LDE3LjgzNSwxMC4xNDEsMzYuNTQyLDEwLjE0MWM1LjAwNSwwLDEwLjEzOS0wLjY4MSwxNS4xMjEtMi40MTggICAgYzExLjc5Ni00LjExMSwyMC41NDYtMTMuMjA4LDI2LjAwNi0yNy4wNDdjMTUuODA1LTQwLjAxMSwxNC42ODMtOTguNTU0LDEzLjg2Mi0xMTcuMDUxaDY3LjE3MmMwLjczLDAsMS40Ni0wLjE0NCwyLjEyMi0wLjQzNSAgICBsMzMuNDI4LTE0LjMyNmwxNy4yOTcsMTEuODExTDI3MS4wNSw1MS44NDF6IiBmaWxsPSIjOGM0NjM3Ii8+CgkJPHBhdGggZD0iTTEzMC40NzYsMjM4Ljg0OWM1LjgxOSwwLDEwLjUzNiw0LjcxMywxMC41MzYsMTAuNTNjMCw1LjgyLTQuNzE2LDEwLjU0MS0xMC41MzYsMTAuNTQxICAgIGMtNS44MTksMC0xMC41MzYtNC43MjEtMTAuNTM2LTEwLjU0MUMxMTkuOTQsMjQzLjU2MiwxMjQuNjU3LDIzOC44NDksMTMwLjQ3NiwyMzguODQ5eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxwYXRoIGQ9Ik0xNzkuMjM3LDIzOC44NDljNS44MTcsMCwxMC41MzYsNC43MTMsMTAuNTM2LDEwLjUzYzAsNS44Mi00LjcxOSwxMC41NDEtMTAuNTM2LDEwLjU0MSAgICBjLTUuODE0LDAtMTAuNTM1LTQuNzIxLTEwLjUzNS0xMC41NDFDMTY4LjcwMiwyNDMuNTYyLDE3My40MjIsMjM4Ljg0OSwxNzkuMjM3LDIzOC44NDl6IiBmaWxsPSIjOGM0NjM3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /> Social Impact:
      <div id="soc_result"></div></div>
    <br>
      <div class="box-2"><h3>
        Impact of making this switch everyday for a year:</h3>
<div id="year_result">
        </div></div>
<div class="box-2"> <h3>Impact of everyone in the US making this switch just <b>once</b>:</h3>
<div id="US_result">
</div></div>
</div></div>
  </body>


<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_button_pinterest"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

基本上，我只需要更改代码，使数字后面的“+”或“-”实际出现在前面 - 所以它是“-100 加仑水”而不是“100 - 加仑水”。

如有任何帮助/指导，我们将不胜感激。谢谢!

最佳答案

编辑

我设法将 $ 符号放在 + 或 - 符号之后。
所以不是:

"$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'

现在是($ 被发送到函数):

format(stock.healthcare, quantity, 2,"bad","save","$")

在函数中，它将 $ 放在返回字符串中的正确位置。

var temp=[];
if(unit=="$"){
  temp = [data[2],"$",data[0],data[1]];
}else{
  temp = [data[2],data[0],data[1]];
}
return temp.join(' ');

参见 CodePen version #2.


第一个答案:
我只是在 format() 和 format2()

中更改了返回的 join(' ') 之前的数组顺序> 
var temp = [data[2],data[0],data[1]];
return temp.join(' ');

代替:

return data.join(' ')

参见 CodePen。

var  stocks= [
  ["Beef (80/20) raw","oz",115.4451262,3.293742347,72,4.85,5.65,0,2.142,19,20,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Beef (90/10) raw","oz",115.4451262,3.293742347,50,5.65,2.83,0,1.109,19,18,0.0001275510204,0.375,0.75,22.15988372,0.3768292943,4  ],
  ["Chicken breast","oz",32.39053977,0.3923520408,34,6.38,0.74,0,0.16,13,21,0.01631172356,0.10625,0.2125,3.149953226,0.3765300698,4  ],
  ["Chicken thighs/legs","oz",32.39053977,0.3923520408,125,2.72,12.54,0,3.431,14,30,0.01631172356,0.10625,0.2125,3.149953226,0.3765799405,4  ],
  ["Milk (whole)","fl oz",7.638924987,0.146234933,19,0.96,0.99,1.54,0.569,13,3,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Milk (2%)","fl oz",7.638924987,0.06133157758,15,1.06,0.58,1.54,0.363,16,2,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2417190282,8  ],
  ["Pizza (cheese)","slice",42,0.976332736,285,12.19,10.37,3.83,4.778,640,18,0.00001071428571,2.98828125,5.9765625,36.85985865,0.466697922,4  ],
  ["Ice Cream","cup",32.59312,0.6191784396,274.71344,4.6095984,14.4806576,27.9835216,8.94913952,107.09168,55.87392,0.000003990994286,1.11311325,2.2262265,13.73003196,2.889031735,1  ],
  ["Milk (skim)","fl oz",7.638924987,0.05948052127,10,1.03,0.02,1.54,0.017,13,1,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2415694159,8  ],
  ["Eggs (large)","each",43.13341461,0.5215603261,78,6.29,5.3,0.2,1.633,62,186,0.001666666667,0.265625,0.53125,3.713549,0.1305756192,1  ],
  ["Lamb","oz",78.125,4.010117347,80,4.69,6.64,0,2.889,17,21,0.03333333333,0.3125,0.625,2.274815967,0.3767295528,4  ],
  ["Cheese (hard)","slice (oz)",37.44571072,1.35234933,105,6.59,8.41,0.14,5.32,159,27,0.000003571428571,0.99609375,1.9921875,12.28661955,0.1303337926,1  ],
  ["Yogurt","oz",5.833333333,0.09395993304,17,0.98,0.92,1.32,0.595,13,4,3.571428571e-7,0.099609375,0.19921875,1.228661955,0.2229453548,6  ],
  ["Greek yogurt, vanilla (nonfat)","fl oz",15,0.08285194565,22,2.45,0.05,1.01,0.038,10,1,8.928571429e-7,0.3984375,0.796875,3.071654888,0.1965527472,6  ],
  ["Chocolate","oz",127.316,0.1863325866,151,2.16,8.39,14.57,5.238,22,7,7.142857143e-8,0.019921875,0.03984375,1.601963425,1.345070603,1.45  ],
  ["Cacao","oz",179.739,0.625,136,1.19,8.51,15.45,5.032,3,0,0,0,0,3.390577585,1.418619303,1.45  ],
  ["Salmon (farmed)","oz",0.498125,0.56925,59,5.79,3.8,0,0.864,17,16,0.004464285714,0.078125,0.15625,0.5593288054,0.3767295528,4  ],
  ["Tuna (canned in oil)","oz",0.498125,0.1197485281,56,8.26,2.33,0,0.435,118,5,0.000270197828,1.0625,2.125,0.5593288054,0.3817664985,4  ],
  ["Mayo","oz",14.41309121,0.1237135815,193,0.27,21.22,0.16,3.318,180,12,0.0004166666667,0.06640625,0.1328125,0.92838725,0.1330741748,0.5  ],
  ["Pulled Pork raw","oz",44.84498316,0.7763814526,53,4.94,3.5,0,1.232,17,18,0.0005208333333,0.21875,0.4375,1.592371177,0.3767295528,4  ],
  ["Butter (salted)","oz",41.58720633,0.5919085938,203,0.24,22.95,0.02,14.537,182,61,0.0000075,2.091796875,4.18359375,25.80190106,0.121322241,1  ],
  ["Soy Burger","oz",21.8,0.048125,50,4.44,1.78,0.3,0.408,161,1,0,0,0,2.314125,0.03342563782,4  ],
  ["Vegan Nuggets (soy)","oz",21.8,0.048125,52,4.88,1.63,0.65,0.325,172,0,0,0,0,2.314125,0.06360340429,4  ],
  ["Soymilk (original)","fl oz",2.319532348,0.02445449777,17,1,0.54,1.21,0.063,16,0,0,0,0,1.168382863,0.1032302684,8  ],
  ["Tofu","oz",25.25,0.09625,23,2.82,1.49,0.2,0.26,1,0,0,0,0,4.62825,0.01698083545,4  ],
  ["Tempeh","oz",12.383064,0.0230998152,54,5.74,3.06,0,0.719,3,0,0,0,0,1.110771114,0.0001496122504,4  ],
  ["Mixed Nuts","oz",18.72285536,0.18425,172,5.53,15.17,1.42,2.271,1,1,0,0,0,1.019662873,0.1202597201,1  ],
  ["Bread","slice",9.735884788,0.1530147137,79,3.09,1.31,1.66,0.202,137,0,0,0,0,0.5625,0.1473592997,2  ],
  ["Lentils","oz",30.3684714,0.07425,33,2.55,0.11,0.51,0.015,1,0,0,0,0,2.287814892,0.04322383072,7.1  ],
  ["Black Beans","oz",30.3684714,0.141625,37,2.31,0.1,0.09,0.025,1,0,0,0,0,1.555714169,0.007668804863,7.1  ],
  ["Tomato Sauce","oz",3.13704,0.09375,11,0.47,0.06,1.37,0.008,57,0,0,0,0,0.4188459746,0.1188197409,8  ],
  ["Pinto Beans","oz",30.3684714,0.141625,40,2.55,0.18,0.09,0.038,0,0,0,0,0,0.9075003086,0.007618934113,7.1  ],
  ["French Fries","oz",2.9337142,0.0417335921,56,0.82,1.91,0.14,0.359,113,0,0,0,0,0.4200133922,0.01748707005,4  ],
  ["Peanut Butter","oz",36,0.2145,167,6.81,14.13,2.97,2.153,138,0,0,0,0,3.675378676,0.2583069893,1  ],
  ["Olive Oil","oz",21.77842536,0.2306145384,250,0,28.3,0,3.908,1,0,0,0,0,1.512500057,0.00004987075014,0.5  ],
  ["Banana","medium",6.440662244,0.1763699536,105,1.29,0.39,14.43,0.132,1,0,0,0,0,0.1768995697,1.221618974,1  ],
  ["Mixed vegetables","oz",2.41150377,0.125,18,0.81,0.04,0,0.009,10,0,0,0,0,3,0.0004987075014,4  ],
  ["Nutritional Yeast","g",0.08506329224,0.00706361088,3.9859577,0.5989518739,0,0,0,0,0,0,0,0,0,0,5  ],
  ["Rice (white)","oz",25.46308329,0.34375,102,1.87,0.16,0,0.045,0,0,0,0,0,0.3995205753,0,2  ],
  ["Potatoes","oz",1.872285536,0.03575,16,0.73,0.03,0.2,0.007,3,0,0,0,0,0.06927480776,0.01708057695,5.3  ],
  ["Vegetable Oil","oz",17.70433203,0.125,205,0,23.8,0,19.937,0,0,0,0,0,5.300817694,0,0.5  ],
  ["Wheat (flour)","cup",40.44136758,0.1235081329,408,13.56,1.88,0.36,0.276,4,0,0,0,0,1.598082301,0.03067521945,0.25  ],
  ["Margarine","oz",9.915624199,0.06125,102,0.28,11.32,0,2.048,222,0,0,0,0,5.300817694,0.01107130653,1  ],
  ["Corn Syrup","fl oz",11.15931776,0.01728062914,109,0,0,29.31,0,1,0,0,0,0,0.4854914297,2.481282747,1  ],
  ["Sugar","oz",11.23371322,0.01503093504,110,0,0,28.3,0,0,0,0,0,0,0.4340729937,2.395731504,1  ],
  ["Corn (grain)","oz",6.74022793,0.0104375,103,2.67,1.34,0.18,0.189,10,0,0,0,0,0.4549631935,0.01573657573,1  ],
  ["Soda","fl oz",10.64647779,0.02494335117,13,0,0.08,3.05,0,1,0,0,0,0,0.1939638153,0.2582470824,12  ]
]
function Stock (data) {
  return {
    name: data[0],
    servingUnit: data[1],
    water: [data[2], ''],
    carbon: [data[3], ''],
    calories: [data[4], ''],
    protein: [data[5], 'g'],
    fat: [data[6], 'g'],
    saturatedFat: [data[8], 'g'],
    sugar: [data[7], 'g'],
    sodium: [data[9], 'mg'],
    cholesterol: [data[10], 'mg'],
    lives: [data[11], ''],
    feed: [data[12], ''],
    meals: [data[13], ''],
    land : [data[14], ''],
    healthcare : [data[15], ''],
    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,a) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
    console.log(data);
  if(a=="bad" && data[2]==" + "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]==" - "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]==" - "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]==" + "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]=="use"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="bad" && data[2]=="save"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]=="save"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  else if (a=="good" && data[2]=="use"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  var temp = [data[2],data[0],data[1]];
  return temp.join(' ')
}

function format2(data, multiplier, digits,a) {
  data = data.slice()
  data[0] = (+(data[0] * multiplier).toFixed(digits)).toLocaleString();
    console.log(data);
  if(a=="use" && data[2]==" + "){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="use" && data[2]==" - "){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="emit" && data[2]=="use"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  else if (a=="emit" && data[2]=="save"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  if(a=="consumegood" && data[2]=="more"){
  data[0]="<span class='color-green'>"+data[0]+"</span>"
  }
  if(a=="consumegood" && data[2]=="less"){
  data[0]="<span class='color-red'>"+data[0]+"</span>"
  }
  var temp = [data[2],data[0],data[1]];
  return temp.join(' ');
}
function stockFacts(stock, quantity) {
  return [
    format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
    format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
    format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
    format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
    format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>' +
    format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>' +
    "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
  ]
}

function stockFactsEnv(stock, quantity) {
  return [
    format(stock.water, quantity, 2,"bad","use") + ' gallons of water<br>' +
    format(stock.carbon, quantity, 2,"bad","emit") + ' pounds of carbon dioxide and methane equivalents <br>' +
    format(stock.land, quantity, 2,"bad","require") + ' square feet of land needed<br>'
  ]
}

function stockFactsHealth(stock, quantity) {
  return [
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
    format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
    format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
    format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
    "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs<br>'
  ]
}

function stockFactsSocial(stock, quantity) {
  return [
    format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed<br>' +
    format(stock.meals, quantity, 2,"bad","preserve") + ' meals made from feed<br>'
  ]
}

function stockFacts2(stock, quantity) {
  return [
    format(stock.water, (quantity/50), 2,"bad","use") + ' bathtubs worth of water used<br>' +
    format(stock.carbon, (quantity*23.6/(20)), 2,"bad","emit") + ' miles worth of carbon dioxide driven in a car<br>' +
    format(stock.calories, quantity, 2,"bad","consume") + ' calories<br>' +
    format(stock.protein, quantity, 2,"good","consumegood") + ' of protein<br>' +
    format(stock.fat, quantity, 3,"bad","consume") + ' of fat<br>' +
    format(stock.saturatedFat, quantity, 2,"bad","consume") + ' of saturated fat<br>' +
   format(stock.sugar, quantity, 2,"bad","consume") + ' of sugar<br>' +
   format(stock.sodium, quantity, 2,"bad","consume") + ' of sodium<br>' +
   format(stock.cholesterol, quantity, 2,"bad","consume") + ' of cholesterol<br>' +
   format(stock.lives, quantity, 5,"bad","save") + ' animal lives needed <br>' +
   format(stock.feed, quantity, 2,"bad","require") + ' pounds of feed required<br>' +
    "Be able to feed " + format(stock.meals, (quantity/365/3), 2,"bad","preserve") + ' people for an entire year<br>' +
   format(stock.land, (quantity/43560), 2,"bad","require") + ' acres of land needed<br>' +
  "$"+format(stock.healthcare, quantity, 2,"bad","save") + 'in projected healthcare costs<br>'
  ]
}

function stockFacts3(stock, quantity) {
  return [
    format(stock.water, (quantity/660430), 2,"bad","use") + ' Olympic swimming pools worth of water<br>' +
    format(stock.carbon, (quantity/12000), 2,"bad","emit") + ' cars worth of carbon dioxide<br>' +
   format(stock.lives, quantity, 5,"bad","save") + ' animal lives<br>' +
    "Be able to feed " + format(stock.meals, (quantity/3/365), 2,"bad","preserve") + ' people for an entire year<br>' +
    format(stock.land, (quantity/43560), 2,"bad","require") + ' acres of land required<br>' +
   "$"+format(stock.healthcare, quantity, 2,"bad","save") + ' in projected healthcare costs'
  ]
}

$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 + ') of:')
    
    $result.html(stockFacts(stock, amount))
  })
  
  var selected = [].map.call($selects, getStock)
  $comparisonResult.empty()
  if (!selected[0] || !selected[1]) return
  var difference = {};
  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
    difference[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? 'save' : 'use'];
    diff[k] = [Math.abs(first[0] - second[0]), first[1], first[0] > second[0] ? ' + ' : ' - ']
  })
  
  $comparisonResult.html(stockFacts(diff, quantity));
	$('#env_result').html(stockFactsEnv(diff, quantity));
  $('#health_result').html(stockFactsHealth(diff, quantity));
  $('#soc_result').html(stockFactsSocial(diff, quantity));
	$('#year_result').html(stockFacts2(diff, quantity*365));
  $('#US_result').html(stockFacts3(diff,quantity*323148587));
}


$selects.add($quantity).on('input', updateAmount)

function getStock (select) {
  return stocks[+select.value]
}
.main-container{

  display: flex; 
  flex-wrap: wrap;
}

*{
  padding : 0;
  margin : 0;
}
body{
  height : 100vh;
  background-color: #F8F8FF;
}

.topnav {
  height: 50px;
  width: 100%;
  color: white;
  background-color: #173;
  overflow: hidden;
  text-align: center;

}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;

}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.box-1{
  width : 25%;
  margin-left: 5%;
  display : block;
  text-align : center;
  font-size : 1.5em;

}

.box{
  width : 22%;
  display : block;
  text-align : center;
  font-size : 1.5em;
}

.box-2{
  width : 48%;
  margin-top: 1%;
  display : block;
  text-align : center;
  font-size : 1.5em;
}



@media screen and (max-width: 480px) {
  .box{
    display : block;
    width : auto;

  }

  .box-2{
    display : block;
    width : auto;

  }
}

.color-red{
  color:red;
  background:transparent}
.color-green{
  color:green;
  background:transparent}




#share-buttons img {
  width: 35px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
  background: transparent;
}


/* Hide AddToAny vertical share bar when screen is less than 980 pixels wide */
@media screen and (max-width: 980px) {
  .a2a_floating_style.a2a_vertical_style { display: none; }
}
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script src="semantic/dist/semantic.min.js"></script>
  </head>

  <body>
    <div class="topnav" id="myTopnav">
      <a href="#ingredient">Ingredient Calculator</a>
  <a href="#meal">Meal Calculator</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#sources">Sources</a></div>
  <div class="main-container">
      <div class="box-1"> 
      <label>
    Servings:
        <br>
    <input type="number" id="numberOfStocks" value="1" min="0" />
  </label>
        <br>
        <h3>The impact of eating<span class="servingUnit"></span></h3>
        <select class="ui fluid search dropdown selectStock">
          <option value="-1">Pick a food!</option>
        </select>
        <h3> 
          <br>
          vs.
        <span class="servingUnit"></span></h3>
        <select class="selectStock">
          <option value="-1">Pick a food!</option>
        </select>
        <br>
        <h2></h2>
      </div>
      <div class="box"><i class="fa fa-car" style="color:#A9A9A9"></i> Environmental Impact:</h2><div id="env_result"></div></div>
      <div class="box"><i class="fa fa-heartbeat" style="color:#FF69B4"></i> Health Impact:</h2><div id="health_result"></div></div>
      <div class="box"><img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDI5OC4zNDUgMjk4LjM0NSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjk4LjM0NSAyOTguMzQ1OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTE4Ni42OTMsOTAuMjc0Yy0xMi4xNDQsMC0yMi4wMTIsOS44NjgtMjIuMDEyLDIyLjAwN2MwLDEyLjEzOCw5Ljg2OCwyMi4wMTIsMjIuMDEyLDIyLjAxMiAgICBjMTIuMTM2LDAsMjIuMDE2LTkuODc0LDIyLjAxNi0yMi4wMTJDMjA4LjcwOCwxMDAuMTQzLDE5OC44MjMsOTAuMjc0LDE4Ni42OTMsOTAuMjc0eiBNMTg2LjY5MywxMjMuNTM3ICAgIGMtNi4yMDYsMC0xMS4yNjEtNS4wNDItMTEuMjYxLTExLjI2MmMwLTYuMjA4LDUuMDQ0LTExLjI1NSwxMS4yNjEtMTEuMjU1YzYuMjA5LDAsMTEuMjY1LDUuMDQyLDExLjI2NSwxMS4yNTUgICAgQzE5Ny45NTMsMTE4LjQ5NSwxOTIuOTA3LDEyMy41MzcsMTg2LjY5MywxMjMuNTM3eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxjaXJjbGUgY3g9IjEwNS4yMzQiIGN5PSIxMTIuMjgxIiByPSIxMS4yNTYiIGZpbGw9IiM4YzQ2MzciLz4KCQk8cGF0aCBkPSJNMjkyLjQwNSwyMS4yMjRMMjY4Ljg4Nyw1LjE2NmMtMS41MTctMS4wMzctMy40NTMtMS4yMzEtNS4xNDktMC41MDRMMjMzLjM0OSwxNy42OUMyMzAuMTYzLDcuNDgzLDIyMC43NDEsMCwyMDkuNDk2LDAgICAgYy0xMS45NzksMC0yMi4wMDYsOC40NTctMjQuNDczLDE5LjcxN2gtNzEuOTQ2QzExMC42MDQsOC40NTcsMTAwLjU4MywwLDg4LjU5NywwYy0xMS4yMDgsMC0yMC42MDksNy40MzQtMjMuODIsMTcuNTg4ICAgIEwzNC42MTIsNC42NjJjLTEuNjgzLTAuNzIyLTMuNjI4LTAuNTM4LTUuMTUsMC41MDRMNS45NDQsMjEuMjI0Yy0yLjE4MSwxLjQ4OC0yLjk1NSw0LjM1MS0xLjgyNyw2Ljc0bDE0LjkxMSwzMS41NDEgICAgYzAuODkyLDEuODg3LDIuNzg0LDMuMDgxLDQuODU4LDMuMDgxaDIyLjcxMUw2MC4xNCw3MC4wM2wtOS4wNjgsMTE0LjcyOWMtMC43NjQsNS4zMDMtMS4xMTgsOS43OTUtMS4xMTgsMTQuMTQzICAgIGMwLDU0LjgzNCw0NC42MDksOTkuNDQ0LDk5LjQ0NCw5OS40NDRjNTQuODM4LDAsOTkuNDU4LTQ0LjYxLDk5LjQ1OC05OS40NDRjMC00LjM0OC0wLjM1NS04Ljg0LTEuMDgtMTMuNzk1bC05LjEyOS0xMTUuMzA3ICAgIGwxMy4xMDItNy4yMDJoMjIuNzFjMi4wODksMCwzLjk3OS0xLjIsNC44NTktMy4wODJsMTQuOTA5LTMxLjU0MUMyOTUuMzU1LDI1LjU3NSwyOTQuNTg5LDIyLjcyMiwyOTIuNDA1LDIxLjIyNHogTTIwOS40OTYsMTAuNzUxICAgIGM2LjAwNSwwLDExLjEzOSwzLjcxMywxMy4yNzYsOC45NjZoLTI2LjU0MUMxOTguMzUsMTQuNDY1LDIwMy40OSwxMC43NTEsMjA5LjQ5NiwxMC43NTF6IE0xMjcuMjQ1LDExMi4yODIgICAgYzAsMTIuMTM4LTkuODc1LDIyLjAxMi0yMi4wMTEsMjIuMDEyYy0xMi4xMzksMC0yMi4wMTMtOS44NzQtMjIuMDEzLTIyLjAxMmMwLTEyLjEzOSw5Ljg3NC0yMi4wMDcsMjIuMDEzLTIyLjAwNyAgICBDMTE3LjM3MSw5MC4yNzQsMTI3LjI0NSwxMDAuMTQzLDEyNy4yNDUsMTEyLjI4MnogTTg4LjYwMiwxMC43NTFjNi4wMDUsMCwxMS4xNCwzLjcxMywxMy4yNzMsOC45NjZINzUuMzI2ICAgIEM3Ny40NiwxNC40NjUsODIuNTkxLDEwLjc1MSw4OC42MDIsMTAuNzUxeiBNMjcxLjA1LDUxLjg0MWgtMjAuNjk0Yy0wLjkwNiwwLTEuOCwwLjIyNi0yLjU4MSwwLjY2N2wtMTcuMzYsOS41NDEgICAgYy0xLjg0OSwxLjAxLTIuOTM1LDMuMDI2LTIuNzY3LDUuMTM5bDkuNDQzLDExOS4wOTJjMC42ODMsNC43OTksMS4wMTMsOC44MDksMS4wMTMsMTIuNjIxYzAsNDguOTI0LTM5Ljc5LDg4LjcwMy04OC43MDcsODguNzAzICAgIGMtNDguOTE2LDAtODguNjk0LTM5Ljc3OS04OC42OTQtODguNzAzYzAtMy44MTIsMC4zMjMtNy44MjIsMS4wNDItMTIuOTU2bDEuOTQyLTI0LjUxbDYuNzc3LDUuMDY2ICAgIGMwLjE3MywwLjEyLDAuMzQ0LDAuMjQxLDAuNTI3LDAuMzQxYzAuODk3LDAuNTE0LDE3LjgzNSwxMC4xNDEsMzYuNTQyLDEwLjE0MWM1LjAwNSwwLDEwLjEzOS0wLjY4MSwxNS4xMjEtMi40MTggICAgYzExLjc5Ni00LjExMSwyMC41NDYtMTMuMjA4LDI2LjAwNi0yNy4wNDdjMTUuODA1LTQwLjAxMSwxNC42ODMtOTguNTU0LDEzLjg2Mi0xMTcuMDUxaDY3LjE3MmMwLjczLDAsMS40Ni0wLjE0NCwyLjEyMi0wLjQzNSAgICBsMzMuNDI4LTE0LjMyNmwxNy4yOTcsMTEuODExTDI3MS4wNSw1MS44NDF6IiBmaWxsPSIjOGM0NjM3Ii8+CgkJPHBhdGggZD0iTTEzMC40NzYsMjM4Ljg0OWM1LjgxOSwwLDEwLjUzNiw0LjcxMywxMC41MzYsMTAuNTNjMCw1LjgyLTQuNzE2LDEwLjU0MS0xMC41MzYsMTAuNTQxICAgIGMtNS44MTksMC0xMC41MzYtNC43MjEtMTAuNTM2LTEwLjU0MUMxMTkuOTQsMjQzLjU2MiwxMjQuNjU3LDIzOC44NDksMTMwLjQ3NiwyMzguODQ5eiIgZmlsbD0iIzhjNDYzNyIvPgoJCTxwYXRoIGQ9Ik0xNzkuMjM3LDIzOC44NDljNS44MTcsMCwxMC41MzYsNC43MTMsMTAuNTM2LDEwLjUzYzAsNS44Mi00LjcxOSwxMC41NDEtMTAuNTM2LDEwLjU0MSAgICBjLTUuODE0LDAtMTAuNTM1LTQuNzIxLTEwLjUzNS0xMC41NDFDMTY4LjcwMiwyNDMuNTYyLDE3My40MjIsMjM4Ljg0OSwxNzkuMjM3LDIzOC44NDl6IiBmaWxsPSIjOGM0NjM3Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /> Social Impact:
      <div id="soc_result"></div></div>
    <br>
      <div class="box-2"><h3>
        Impact of making this switch everyday for a year:</h3>
<div id="year_result">
        </div></div>
<div class="box-2"> <h3>Impact of everyone in the US making this switch just <b>once</b>:</h3>
<div id="US_result">
</div></div>
</div></div>
  </body>


<div class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style" style="left:0px; top:150px;">
    <a class="a2a_button_facebook"></a>
    <a class="a2a_button_twitter"></a>
    <a class="a2a_button_google_plus"></a>
    <a class="a2a_button_pinterest"></a>
</div>

<script async src="https://static.addtoany.com/menu/page.js"></script>

关于javascript - 快速格式调整-调整Javascript中的文字位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44401622/

上一篇：javascript - 中心输入框和 Font Awesome 图标

下一篇：jquery - 将魔术线宽度设置为 anchor 而不是列表项

相关文章：

javascript - 从json中读取数据

javascript - 遍历对象数组并按对象元素 id 返回每个总值的总和

javascript - 添加项目以选择字段表单 - Jquery

html - 如何像 td 一样在 span 或 div 的中心(垂直)对齐文本？

javascript - 如何结束 .empty()

javascript - 为什么关注输入框和选项不适用于 Bootstrap 模式？

javascript - 使用 AngularJS 表达式设置输入类型 ="file"在 Chrome 中不起作用

javascript - 单击类(class)时在地址栏中隐藏哈希

jquery - 使用响应式和 HTML5 在后台播放视频

javascript - 使用 jQuery 从 XML 加载 Highcharts 系列

©2024 IT工具网  联系我们