选择几个项目后，Jquery条件计算器去干草线

Question

我目前正在建造一个卡路里计算器。一切都很好，但我认为我的等式不能处理十进制数。

问题在于：如果我选择3-5种成分。卡路里计算器开始给我错误的结果（.00000001差异）。我无法弄清楚javascript逻辑中的错误。

代码在这里：https://codepen.io/Pbalazs89/pen/rGqRLj

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.ingredient').click(function() {
    var totalNum = $('#total');
    var totalCarbs = $('#totalCarbs');
    var totalFats = $('#totalFats');
    var totalProteins = $('#totalProteins');
    var pressed = $(this).hasClass('clicked');
    var currentCalories = +totalNum.html();
    var currentCarbs = +totalCarbs.html();
    var currentFats = +totalFats.html();
    var currentProteins = +totalProteins.html();

    if (pressed) {
      $(this).removeClass('clicked');
      var calories = $(this).data('calories');
      var carbs = $(this).data('carbs');
      var fat = $(this).data('fat'); +
      totalNum.html(currentCalories - calories); +
      totalCarbs.html(currentCarbs - carbs); +
      totalFats.html(currentFats - fat); +
      totalProteins.html(currentProteins - proteins);
    } else {
      $(this).addClass('clicked');
      var calories = $(this).data('calories');
      var carbs = $(this).data('carbs');
      var fat = $(this).data('fat');
      var proteins = $(this).data('fat'); +
      totalNum.html(currentCalories + calories); +
      totalCarbs.html(currentCarbs + carbs); +
      totalFats.html(currentFats + fat); +
      totalProteins.html(currentProteins + fat);
    }

    // vegan      
    var vegan = false;
    var vegetarian = false;
    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegan") != "undefined") {
        vegan = true;
      } else {
        vegan = false;
        return false;
      }
    });

    if (vegan) {
      $('#type').text("Ez az összeállítás Vegán");
      $('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
    } else {
      $('#type').text("");
      $('#typeImage').attr("src", "");
    }

    $(".ingredient.clicked").each(function() {
      if (typeof $(this).attr("vegetarian") != "undefined") {
        vegetarian = true;
      } else {
        vegetarian = false;
        return false;
      }
    });

    if (vegetarian) {
      $('#typeVega').text("Ez az összeállítás vegetáriánus");
      $('#typeImageVega').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
    } else {
      $('#typeVega').text("");
      $('#typeImageVega').attr("src", "");
    }
  });
});

＆＃13;

div,
p,
h1 {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

body {
  font-size: 1.0rem;
  font-family: sans-serif;
  background: #42413f;
}

.header {
  background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/whiteback.jpg) center top repeat;
  margin-bottom: 30px;
  text-align: center;
  margin-top: 30px;
}

.header img {
  margin-bottom: 30px;
}

.header h1 {
  font-size: 1.5rem;
}

.ingredients {
  background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/greyback.jpg) center top repeat;
  border-radius: 0px;
  border: 4px solid #6FC0BB;
  padding: 30px 60px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.ingredients h2 {
  width: 100%;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.ingredient {
  border: 2px solid #6FC0BB;
  padding: 10px 20px;
  border-radius: 5px;
  margin-right: 20px;
  margin-bottom: 20px;
  color: white;
}

.ingredient:hover {
  cursor: pointer;
  background-color: #6FC0BB;
  color: #fff;
  border: 2px solid #6FC0BB;
}

.ingredient:active {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
}

.clicked {
  background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/whiteback.jpg) center top repeat;
  color: black;
  border: 2px solid #282828;
}

.clicked:hover {
  cursor: pointer;
  background-color: #6FC0BB;
  color: black;
  border: 2px solid #6FC0BB;
}

.total {
  margin-top: 30px;
  font-weight: bold;
  width: 100%;
  font-size: 1.1rem;
  text-transform: ;
}

//* fonts *//
@font-face {
  font-family: 'Lithos Pro Black';
  font-style: normal;
  font-weight: normal;
  src: local('Li Pro Black'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Black.otf') format('opentype');
}

@font-face {
  font-family: 'Lithos Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Lithos Pro Regular'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Regular.otf') format('opentype');
}


/*@font-face {
        font-family: 'Arial Narrow';
        font-style: normal;
        font-weight: normal;
        src: local('Arial Narrow'), url('http://blog.padthaiwokbar.com/wp-content/fonts/8098062665.ttf') format('truetype');*/

@font-face {
  font-family: 'Lobster Two Italic';
  font-weight: normal;
  font-style: normal;
  src: local('Lobster Two Italic'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LobsterTwo-Italic.otf') format('opentype');
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Proxima Nova Alt Condensed Light.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url ('http://blog.padthaiwokbar.com/content/fonts/Mark Simonson - Proxima Nova Thin.otf');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin Italic.otf');
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin.otf');
  font-weight: 700;
  font-style: italic;
}


/*  Fontok  */

p {
  font-family: "Lithos Pro";
  font-weight: 100;
  font-style: normal !important;
}

.h-landmark span {
  font-family: 'Lithos Pro Black' !important;
}

h2 a,
h3,
h2 {
  font-family: 'Lithos Pro' !important;
  font-style: normal;
  font-size: 1.5em !important;
}

.x-brand {
  display: none;
}

.total {
  font-family: 'Lobster Two' !important;
  font-style: italic;
  color: white;
  font-size: 1.3em !important;
}

.typeImage,
typeImagevega {
  height: 50px;
  width;
  50px;
}

.header img {
  height: 50px;
  width;
  50px;
}

＆＃13;

<div class="header">
  <div class="ingredients">
    <p style="color:white; text-align:center; margin: auto auto;">Select all the ingredients you added to your padthai wokbar meal and we'll do the rest.</p>
    <br>
    <table>
      <tr>
        <th>
          <h2 style="color:#6FC0BB;">BASES</h2>
        </th>
        <th>
          <h2 style="color:#C84327;">MEATS</h2>
        </th>
        <th>
          <h2 style="color:#C84327;">TOPPINGS</h2>
        </th>
        <th>
          <h2 style="color:white;">SAUCES</h2>
        </th>
        <th>
          <h2 style="color:#6FC0BB;">EXTRA TOPPINGS</h2>
        </th>
        <th>
          <h2 style="color:#90A94D;">TEAS</h2>
        </th>
        <th>
          <h2 style="color:white;">DESSERTS</h2>
        </th>
      </tr>
      <tr>
        <td>
          <div class="ingredient" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8" vegan vegetarian>
            <p>Rice Noodles
              <p>
                <td>
                  <div class="ingredient" data-calories="65.9" data-carbs="0.2" data-fat="1.5" data-proteins="12.9">
                    <p>Chicken
                      <p>
                  </div>
                  <td>
                    <div class="ingredient" data-calories="11.3" data-carbs="1.2" data-fat="0.1" data-proteins="1.4">
                      <p>Vegetable Mix
                        <p>
                    </div>
                    <td>
                      <div class="ingredient" data-calories="15" data-carbs="2.3" data-fat="0.6" data-proteins="0.1">
                        <p>Thailand-Padthai
                          <p>
                            <td>
                              <div class="ingredient" data-calories="145.9" data-carbs="2.2" data-fat="12.3" data-proteins="6.6">
                                <p>Roasted Peanuts
                                  <p>
                                    <td>
                                      <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
                                        <p>PADTEA Classic
                                          <p>

      </tr>
      <tr>
        <td>
          <div class="ingredient" data-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8" vegan vegetarian>
            <p>Egg Noodles
              <p>

                <td>
                  <div class="ingredient" data-calories="166.4" data-carbs="0.1" data-fat="14" data-proteins="10">
                    <p>Pork
                      <p>
                  </div>

                  <td>
                    <div class="ingredient" data-calories="160" data-carbs="9" data-fat="12" data-proteins="4">
                      <p>Cashew
                        <p>
                    </div>

                    <td>
                      <div class="ingredient" data-calories="9.2" data-carbs="2.2" data-fat="0" data-proteins="0.1">
                        <p>Chinese Sweet & Sour
                          <p>
                      </div>

                      <td>
                        <div class="ingredient" data-calories="14.6" data-carbs="3" data-fat="0.2" data-proteins="0.2">
                          <p>Coriander
                            <p>
                        </div>

                        <td>
                          <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
                            <p>PADTEA FIT
                              <p>
                          </div>

      </tr>

      <tr>
        <td>
          <div class="ingredient" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1">
            <p>Vermicelli
              <p>
          </div>

          <td>
            <div class="ingredient" data-calories="50.1" data-carbs="0.4" data-fat="2.9" data-proteins="5.6">
              <p>Smoked Tofu
                <p>
            </div>

            <td>
              <div class="ingredient" data-calories="11.2" data-carbs="2.5" data-fat="0" data-proteins="0.3">
                <p>Sweet Pepper Mix
                  <p>
              </div>

              <td>
                <div class="ingredient" data-calories="15.3" data-carbs="1.4" data-fat="0.9" data-proteins="0.4">
                  <p>Indonesia-Satay
                    <p>
                </div>


                <td>
                  <div class="ingredient" data-calories="95" data-carbs="1.4" data-fat="8.2" data-proteins="3.9">
                    <p>Sesame Seed
                      <p>
                  </div>

                  <td>
                    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
                      <p>PADTEA POWER
                        <p>
                    </div>

      </tr>

      <td>
        <div class="ingredient" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28">
          <p>Whole Grain Noodle
            <p>
        </div>

        <td>
          <div class="ingredient" data-calories="120.8" data-carbs="0.3" data-fat="8.4" data-proteins="11">
            <p>Beef
              <p>
          </div>

          <td>
            <div class="ingredient" data-calories="11" data-carbs="1.8" data-fat="0.2" data-proteins="0.5">
              <p>Wood Ear Mushroom
                <p>
            </div>


            <td>
              <div class="ingredient" data-calories="9.8" data-carbs="0.9" data-fat="0.6" data-proteins="0.2">
                <p>Burma-Green Curry
                  <p>
              </div>

              <td>
                <div class="ingredient" data-calories="32.3" data-carbs="6" data-fat="0.3" data-proteins="1.4">
                  <p>Basil
                    <p>
                </div>
                <td>
                  <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
                    <p>PADTEA JOY
                      <p>
                  </div>

                  </tr>
                  <tr>

                    <td>
                      <div class="ingredient" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23">
                        <p>White Rice
                          <p>
                      </div>

                      <td>
                        <div class="ingredient" data-calories="111.2" data-carbs="0.2" data-fat="7.2" data-proteins="11.4">
                          <p>Duck
                            <p>
                        </div>

                        <td>
                          <div class="ingredient" data-calories="10.8" data-carbs="1" data-fat="0" data-proteins="1.7">
                            <p>Mushroom
                              <p>
                          </div>

                          <td>
                            <div class="ingredient" data-calories="11.5" data-carbs="1.2" data-fat="0.7" data-proteins="0.1">
                              <p>Laosz-Red Curry
                                <p>
                            </div>


                            <td>
                              <div class="ingredient" data-calories="300" data-carbs="0.1" data-fat="12.46" data-proteins="1">
                                <p>Coconut Chips
                                  <p>
                              </div>

                  </tr>
                  <tr>

                    <td>
                      <div class="ingredient" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9">
                        <p>Brown Rice
                          <p>
                      </div>

                      <td>
                        <div class="ingredient" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22">
                          <p>Prawns
                            <p>
                        </div>


                        <td>
                          <div class="ingredient" data-calories="19.6" data-carbs="4.8" data-fat="0" data-proteins="0.1">
                            <p>Pineapple
                              <p>
                          </div>


                          <td>
                            <div class="ingredient" data-calories="7.2" data-carbs="1.3" data-fat="0" data-proteins="0.5">
                              <p>Japan- Teriyaki
                                <p>
                            </div>


                  </tr>

                  <tr>

                    <td>
                      <div class="" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9">
                        <p>
                          <p>
                      </div>

                      <td>
                        <div class="" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22">
                          <p>
                            <p>
                        </div>


                        <td>
                          <div class="ingredient" data-calories="3.2" data-carbs="0.2" data-fat="0" data-proteins="0.6">
                            <p>Bamboo Shots
                              <p>
                          </div>


                  </tr>

                  <tr>

                    <td>
                      <div class="" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9">
                        <p>
                          <p>
                      </div>

                      <td>
                        <div class="" data-calories="107.5" data-carbs="2.4" data-fat="1.1" data-proteins="22">
                          <p>
                            <p>
                        </div>


                        <td>
                          <div class="ingredient" data-calories="7.2" data-carbs="1" data-fat="0" data-proteins="0.8">
                            <p>Chinese Cabbage
                              <p>
                          </div>


                  </tr>


    </table>


    <div class="total" style="display:block;">
      Total calories: <span id="total"></span> Total Carbs:<span id="totalCarbs"></span> Total Fat:<span id="totalFats"></span> Total Protein:<span id="totalProteins"></span>

      <br>
      <img id="typeImage" src="" height="50px" width="50px" alt="Select Something!" />
      <span id="type"></span>
      <br>
      <img id="typeImageVega" src="" height="50px" width="50px" alt="Test" />
      <span id="typeVega"></span>
      <br>
    </div>

    </div>
    <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

    <script src="js/index.js"></script>

    </body>

    </html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是由内部浮点表示的限制引起的问题。例如，数字0.1不能完全在IEEE 754浮点中表示。因此，一旦开始添加这样的数字，误差幅度就会增加，并且在某些时候将这些数字转换为字符串格式（十进制）开始显示这些微小的差异部分。

由于您的基数只有一个十进制数字，因此以下是针对您的情况进行修复的方法。替换所有出现的此模式：

totalNum.html(currentCalories - calories);

使用：

totalNum.text(+(currentCalories - calories).toFixed(1));

添加相同。

注意：当您要显示的内容是文字而非HTML时，请使用text()代替html()。