Jquery 选择几项后条件计算器出现问题

Question

我目前正在构建一个卡路里计算器。一切都很好，但我认为我的方程无法处理小数。

问题来了：如果我 select 3-5 种成分。卡路里计算器开始给我错误的结果（0.00000001 差异）。我无法找出 javascript 逻辑中的错误。

JQUERY:

$(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", "");
    }
  });
});

HTML:

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

    </body>

    </html>

Answer 1

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

由于您的基数只有一位小数，下面是针对您的情况解决此问题的方法。替换此模式的所有匹配项：

totalNum.html(currentCalories - calories);

与：

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

添加相同。

注意：当您要显示的是文本而不是 HTML 时，请使用 text() 而不是 html()。

Jquery 选择几项后条件计算器出现问题

Jquery conditional calculator going haywire after selecting couple of items

javascript

jquery

calculator

conditional-statements