Veg

Veg

关注
发信
关注(28)粉丝(399)

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

    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>





所以这是我的问题。我想根据不同的饮食习惯（古，纯素，素食，生酮等）创建菜单建议

现在，我有1个具有attr的商品。素食主义者（椰子片），但附加条件并没有按照我想要的方式工作。我想要实现的是让该人单击“非素食”项目（例如鸡肉），并弹出红色图标（到目前为止非常好），但是如果我此后单击椰子片，它将变为绿色。现在不应该发生^^。如果所有单击的项目都具有“纯素”属性，则会显示绿色按钮，否则显示红色。如果未单击任何项​​目，则该按钮消失。

先感谢您！

最佳答案

在这里，您有一个解决方案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的时间，该值仍然为true。

单击non-veg项目后，变量的值将更改为false。

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


希望这会帮助你。

关于javascript - jQuery卡路里计算器条件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46339157/

10-09 07:50
Powered by LMLPHP ©2024 Veg 0.044116