代码之家 › 专栏 › 技术社区 › Pbalazs89

NaN问题-无法在Jquery中显示数字

nan css html jquery javascript

Pbalazs89 · 技术社区 · 7 年前

大家新年快乐! 所以我正在制作一个卡路里计算器,我有一个小问题。

我基本上有4个变量,我想总结和显示:

总热量#总计
碳水化合物
脂肪
蛋白质

我在2/3/4中成功,但是,我在1中得到了一个错误。不知道为什么。只有计算器的“主菜”部分工作,所以请单击它,然后“基数”将向下滚动。从那里选择菜单项后,您将看到问题。

此外,这不是必须的,但会很感激,我想在菜单项上放置一个+符号覆盖,当你在他们的图像右在中间悬停。我似乎无法正确使用CSS。如果有退伍军人有这样的想法,我们将不胜感激。(我在摆弄位置和顶级物业,但我没能把它弄对)

下面是代码:

<!DOCTYPE html>
<html>

<head>
  <title>Padthai calc</title>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>


  <div class="content">
    <h1>PADTHAI CALORIE CALCULATOR</h1>
    <h2>Select a meal to begin your calculation</h2>


  <ul id="menuitems">
    <li><button id="maindish"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span class="bigtext">Main Dish</span></button></li>
    <li><button id="soups"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span class="bigtext">Soup</span></button></li>
    <li><button id="teas"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/oktoberhat05.jpg'><span class="bigtext">Teas</span></button></li>
    <li><button id="desserts"><img src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/IMG_5968-6.jpg'><span class="bigtext">Desserts</span></button></li>
  </ul>

  <div>


  </div>

  <div id="contenttable">
    <div class="maindish">
      <h1>Main Dish</h1>
      <hr>

      <table>
          <th>Bases</th>

          <td><button class="base ingredient container" data-calories="517.2" data-carbs="76.1" data-fat="14.4" data-proteins="20.8" vegetarian glutenfree weightloss lactosefree vegan><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'><span style="smalltext">Rice Noodle</span></button></td>

          <td><button class="base ingredient container" ata-calories="510.5" data-carbs="66.1" data-fat="14.1" data-proteins="29.8" vegetarian lactosefree><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Egg Noodle</button></td>

          <td><button class="base ingredient container" data-calories="506.9" data-carbs="76.9" data-fat="14.1" data-proteins="18.1" vegetarian lactosefree vegan><img  class="image"src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Vermicelli</button></td>

          <td><button class="base ingredient container" data-calories="476.6" data-carbs="53.8" data-fat="16.6" data-proteins="28" vegetarian lactosefree vegan><img  class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Whole Grain Noodle</button></td>

          <td><button class="base ingredient container" data-calories="514.8" data-carbs="72.4" data-fat="14.8" data-proteins="23" vegetarian><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>White Rice</button></td>

          <td><button class="base ingredient container" data-calories="516" data-carbs="70.1" data-fat="16" data-proteins="22.9" glutenfree vegetarian><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Brown Rice</button></td>

          <td><button class="base ingredient container" data-calories="106.6" data-carbs="14.2" data-fat="1.8" data-proteins="8.4" glutenfree vegetarian lactosefree vegan><img class="image" src='http://www.padthai.decorolux.com/wp-content/uploads/2017/11/hangulat01.jpg'>Vegetable Base</button></td>

      </table>
    </div>



<div class="soups">
    <h1>Soups</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>
    <div class="teas">
    <h1>Teas</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>  
    <div class="desserts">
      <h1>Desserts</h1>
<hr>
      <table>
        <tr>
          <th>Company</th>
          <th>Contact</th>
          <th>Country</th>
        </tr>
        <tr>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>Centro comercial Moctezuma</td>
          <td>Francisco Chang</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>Ernst Handel</td>
          <td>Roland Mendel</td>
          <td>Austria</td>
        </tr>
        <tr>
          <td>Island Trading</td>
          <td>Helen Bennett</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>Laughing Bacchus Winecellars</td>
          <td>Yoshi Tannamuri</td>
          <td>Canada</td>
        </tr>
        <tr>
          <td>Magazzini Alimentari Riuniti</td>
          <td>133</td>
          <td>152</td>
        </tr>
      </table>
    </div>


    </div>
   </div>
  </div>
</body>

</html>


<style>

</style>

<div class="footer2">
  <div id="total">Total</div>
  </div>


<footer class="footer">
  <div class="summary">
  <table>

<div id="totalCalories">Total Calories: <span id="total"></span></div>  
<div id="totalCalories1">





        <tr>
          <th>Total Carbs: </th>
          <th>Total Fat: </th>
          <th>Total Protein: </div></th>
        </tr>
        <tr>
          <td class="bigtext"><span id="totalCarbs">0</span> G</td>
          <td class="bigtext"><span id="totalFats">0</span> G</td>
          <td class="bigtext"><span id="totalProteins">0</span> G</td>
    </div>
        </tr>
  </table>

</footer>


</body>


</html>

还有css

html {
  height: 100%;
}

#contenttable {min-height:100%; height:100%}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* Avoid the IE 10-11 `min-height` bug. */
}

.content {
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/b2317ea3.png');
  flex: 1 0 auto;
  min-height:1000px;

}

.footer {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 40px;
  height:20%;
  position: fixed;
  width:100%;
  bottom: 0;
}

.footer2 {
  flex-shrink: 0;
  /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
  padding-left: 40px;
  height:10%;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/da9cc825.png');
    position: fixed;
    bottom: 20%;
    width:100%;
}


button {background: none; color: #424040; border-radius:0px;border:none; font-family: "Lithos Pro"; margin: auto auto;cursor:pointer;}

.base .ingredient .container  {font-size:1.2em;}




button p {margin: auto auto;}

h1, h2 {font-family: "Lithos Pro"; text-align:center; margin: 0 0 20px 0; color: #424040}

a {
  text-decoration: none;
  color: white;
}

* {
  box-sizing: border-box;
}


p {
  margin: 0 0 20px 0;
}

footer {
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/c4b0e511.png');
  color: white;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
  float:left; 
  margin:1em auto;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: center;
  padding: 8px;
  font-family:lithos pro;

}

th {font-size:0.8em;}

tr:nth-child(even) {
  background-color: #dddddd;
}

ul,
li {
  text-decoration: none;
  list-style: none;
  margin: 3%;
  margin-bottom: 5%;
  width: auto;
}

.maindish, .soups, .desserts, .teas ,.summary {max-width:70%; margin:0 auto; display:block; height:100%; min-height: 600px;}

img {
  width:130px; height:120px; margin:0 auto; display:block;border-radius: 50%; padding: 5px;

}

#menuitems {
  display: flex;
  width: auto;
  margin: 0%;
  margin-bottom: 2%;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  background: url('http://www.padthai.decorolux.com/wp-content/uploads/2017/11/b2317ea3.png')
  }

#total, #carbs {color:white; font-size:1.7em;}

/* Hover Animacio */

.image {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;

}

.middle {
  position: absolute;
  transition: .5s ease;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

.clicked {  

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
  transition: .5s ease;
  background-color: #6FC0BB;
}

.bigtext {font-size: 1.3em !important;}
.smalltext {font-size: 0.45em;}
#totalCalories {font-size:1.5em; font-family: "lithos pro"}

还有js

// if ($(".maindish, .soups, .desserts, .teas").is(":visible")) {
//
// }

$(".maindish, .soups, .desserts, .teas").hide();

//Main dish

$("#maindish").click(function() {
  var visibility = $(".maindish").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  //$(".soup, .desserts, .teas").hide();
  $(".maindish").slideToggle("fast");
  $(".soups, .desserts, .teas").slideUp();
});

//soup

$("#soups").click(function() {
  var visibility = $(".soups").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .desserts, .teas").slideUp();
  $(".soups").slideToggle("fast");
});

//teas

$("#teas").click(function() {
  var visibility = $(".teas").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .desserts, .soups").slideUp();
  $(".teas").slideToggle("fast");
});

//desszerts

$("#desserts").click(function() {
  var visibility = $(".desserts").is(":visible");
  if (visibility) {
    console.log("not visible");
  } else {
    console.log("visible");
  }
  $(".maindish, .teas, .soups").slideUp();
  $(".desserts").slideToggle("fast");
});


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

    if (pressed) {
      $(this).removeClass("clicked");
      totalNum.text(+(currentCalories - calories).toFixed(1));
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));
    } else {
      $(this).addClass("clicked");
      totalNum.text(+(currentCalories + calories).toFixed(1));
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
      totalFats.text(+(currentFats + fat).toFixed(1));
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    };

  });

});

哦,为了方便起见,代码笔中有:

https://codepen.io/Pbalazs89/full/eyGXeN

3 回复 | 直到 7 年前

Calvin Nunes 7 年前

我添加了一个检查,以查看CurrentCarries是否为数字,如果不是,则将其设为0,这样,您就不会以“total”作为CurrentCarries开始:

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

    if(isNaN(currentCalories)){
      currentCalories = 0;
    }

    if (pressed) {
      $(this).removeClass("clicked");
      totalNum.text(+(currentCalories - calories).toFixed(1));
      totalCarbs.text(+(currentCarbs - carbs).toFixed(1));
      totalFats.text(+(currentFats - fat).toFixed(1));
      totalProteins.text(+(currentProteins - proteins).toFixed(1));
    } else {
      $(this).addClass("clicked");
      totalNum.text(+(currentCalories + calories).toFixed(1));
      totalCarbs.text(+(currentCarbs + carbs).toFixed(1));
      totalFats.text(+(currentFats + fat).toFixed(1));
      totalProteins.text(+(currentProteins + proteins).toFixed(1));
    };

  });

我还建议您分析将在和/减运算中出现的所有值,以确保所有值都是真正的数字,如果不是,则将其转换为零,这样可以确保计算时不会出现错误。

https://codepen.io/anon/pen/vpewJL

srmeile 7 年前

问题是,当您的程序首次运行时,它会将CurrentCarolis变量设置为“Total”

var totalNum = $("#total");
totalNum.html();

因为文本是Total,所以变为“Total”

<div id="total">Total</div>

应该是

<div id="total">0</div>

esco_448 5 年前

我的代码中出现了相同的问题,并通过使用“on”方法而不是直接使用“click”来修复它。