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

jQuery卡路里计算器条件

conditional html jquery javascript
  •  0
  • Pbalazs89  · 技术社区  · 7 年前

    我正在制作一个卡路里计算器,想寻求一些帮助。代码如下: 

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

    var attr = $(this).attr('vegan');
    console.log(attr);
    if (typeof attr !== typeof undefined && attr !== false) {
      $('#type').text("This is Vegan!")
      $('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
    } else {
      $('#type').text("This is not Vegan!")
      $('#typeImage').attr("src", "http://www.hellocurry.com/images/nonveg_icon.png");
    }
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>padthai wokbar calorie counter</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  <div class="header">
    <img src="http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/logofinal.png" alt="padthai wokbar" style="width:300px;" />
    <h1>How did you build your bowl?</h1>
    <p>Select all the ingredients you added to your padthai wokbar meal and we'll do the rest.</p>
    <br />
    <div class="ingredients">
      <h2 style="color:#6FC0BB;">Bases</h2>
      <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" data-vegan="true" vegetarian>
         <p>Rice Noodles</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
         <p>Egg Noodles</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
         <p>Vermicelli</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
         <p>Whole Grain Noodle</p>
       </div>   

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
         <p>White Rice</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Brown Rice</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Vegetable Base</p>
       </div>

       <h2 style="color:#C84327;">Proteins</h2>
       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Chicken</p>
       </div>

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

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Smoked Tofu</p>
       </div>

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

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

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

       <h2 style="color:#90A94D;">Toppings</h2>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Vegetable Mix</p>
       </div>

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

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Sweet Peppers Mix</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Wood Ear Mushroom</p>
       </div>

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

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

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Bamboo Shots</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Chinese Cabbage</p>
       </div>

       <h2 style="color:#424040;">Sauces</h2>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Thailand-Padthai</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Chinese Sweet and Sour</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Burma- Green Curry</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Indonesia- Satay</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Laosz- Red Curry</p>
       </div>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Japan- Teriyaki</p>
       </div>

       <h2 style="color:#6FC0BB;">Extra Toppings</h2>

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Roasted Peanut</p>
       </div>

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

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
         <p>Sesame Seed</p>
       </div>

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

       <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegan>
         <p>Coconut Chips</p>
       </div>

       <h2 style="color:#C84327;">Desserts</h2>

       <div class="ingredient" data-calories="40" data-carbs="250">
         <p>Cumin Lemon Vinaigrette</p>
       </div>

       <div class="ingredient" data-calories="40" data-carbs="250">
         <p>Honey Cilantro Vinaigrette</p>
       </div>

       <div class="total">
         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="50" width="50" alt="Select Something!"/>
         <span id="type"></span>
         <img id="typeImagevega" src="" height="50" width="50" alt=""/>
         <span id="typevega"></span>
       </div>
     </div>
     <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
     <script  src="js/index.js"></script> 
  </body>
</html>

    这是我的问题。我想根据不同的饮食(古素食、纯素食、素食、生酮等)创建菜单建议

    2 回复  |  直到 7 年前
        1
  •  1
  •   Shiladitya    7 年前

    给你一个解决方案 https://jsfiddle.net/jhw4v5dd/ 

    $(document).ready(function() {
  var vegan = true;
  $('.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);
    }

    var attr = $(this).attr('vegan');
    if (typeof attr !== typeof undefined && attr !== false) {
    	if(vegan) {
      	$('#type').text("This is Vegan!");
      	$('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
      }
    } else {
      $('#type').text("This is not Vegan!");
      vegan = false;
      $('#typeImage').attr("src", "http://www.hellocurry.com/images/nonveg_icon.png");
    }
  });
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <img src="http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/logofinal.png" alt="padthai wokbar" style="width:300px;" />
  <h1>How did you build your bowl?</h1>
  <p>Select all the ingredients you added to your padthai wokbar meal and we'll do the rest.</p>
  <br />
  <div class="ingredients">
    <h2 style="color:#6FC0BB;">Bases</h2>
    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" data-vegan="true" vegetarian>
      <p>Rice Noodles</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
      <p>Egg Noodles</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
      <p>Vermicelli</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
      <p>Whole Grain Noodle</p>
    </div>   

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian>
      <p>White Rice</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Brown Rice</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Vegetable Base</p>
    </div>

    <h2 style="color:#C84327;">Proteins</h2>
    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Chicken</p>
    </div>

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

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Smoked Tofu</p>
    </div>

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

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

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

    <h2 style="color:#90A94D;">Toppings</h2>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Vegetable Mix</p>
    </div>

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

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Sweet Peppers Mix</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Wood Ear Mushroom</p>
    </div>

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

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

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Bamboo Shots</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Chinese Cabbage</p>
    </div>

    <h2 style="color:#424040;">Sauces</h2>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Thailand-Padthai</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Chinese Sweet and Sour</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Burma- Green Curry</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Indonesia- Satay</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Laosz- Red Curry</p>
    </div>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Japan- Teriyaki</p>
    </div>

    <h2 style="color:#6FC0BB;">Extra Toppings</h2>

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Roasted Peanut</p>
    </div>

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

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150">
      <p>Sesame Seed</p>
    </div>

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

    <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegan>
      <p>Coconut Chips</p>
    </div>

    <h2 style="color:#C84327;">Desserts</h2>

    <div class="ingredient" data-calories="40" data-carbs="250">
      <p>Cumin Lemon Vinaigrette</p>
    </div>

    <div class="ingredient" data-calories="40" data-carbs="250">
      <p>Honey Cilantro Vinaigrette</p>
    </div>

    <div class="total">
      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="50" width="50" alt="Select Something!"/>
      <span id="type"></span>
      <img id="typeImagevega" src="" height="50" width="50" alt=""/>
      <span id="typevega"></span>
    </div>
  </div>

    vegan 和赋值为 true ,仍然是你不点击的时候 non-veg

    非素食者

    中更改的代码 JavaScript 

    if (typeof attr !== typeof undefined && attr !== false) {
  if(vegan) {
    $('#type').text("This is Vegan!");
    $('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
  }
} else {
  $('#type').text("This is not Vegan!");
  vegan = false;
  $('#typeImage').attr("src", "http://www.hellocurry.com/images/nonveg_icon.png");
}

    希望这对你有帮助。

        2
  •  1
  •   soztrk    7 年前 

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

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


if(vegan) {
    $('#type').text("This is Vegan!");
    $('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png");
  }

  else {
  $('#type').text("This is not Vegan!");

  $('#typeImage').attr("src", "http://www.hellocurry.com/images/nonveg_icon.png");
}

});
});
    推荐文章
    Deadpool  ·  未返回正确值但未定义的函数的类型
    7 年前
    MLPNPC  ·  与R中的条件合并
    7 年前
    Pbalazs89  ·  在手机上单击两次后,toggleClass条件不起作用/图标消失
    7 年前
    jeangelj  ·  Python panda根据其他列中的条件覆盖值
    7 年前
    user3580480  ·  在ASPX应用程序(VB)中添加条件下拉列表项
    7 年前
    whalesboy  ·  基于结果连接表(查询后)
    7 年前
    CtrlAltF2 BoldX  ·  应为true的条件为false(JS)
    7 年前
    Tania Martínez  ·  <a>展开时标记会打断样式
    7 年前
    Semolor  ·  合并具有相同目标的多个PowerShell脚本-多维条件
    7 年前
    alofgran mrry  ·  有条件替换NaN
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号