jQuery卡路里计算器条件

时间：2017-09-21 08:36:22

标签： javascript jquery html conditional

我正在建立卡路里计算器，并希望寻求帮助。这是代码：

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

所以这是我的问题。我想基于不同的饮食（古，素食，素食，生酮等）创建菜单推荐。

现在，我有一个带有attr的项目。素食主义者（椰子片），但条件不按我想要的方式工作。我想要实现的是让人点击一个'非素食'项目，比如说鸡，然后弹出红色图标（到目前为止一直很好），但是如果我之后点击椰子片，它会变成绿色..现在不应该发生^^。如果所有单击的项目都具有“素食主义”属性，则会显示绿色按钮，否则显示为红色。如果没有点击任何项目，该按钮就会消失。

提前谢谢！

2 个答案:

答案 0 :(得分：1)

您可以使用解决方案https://jsfiddle.net/jhw4v5dd/

＆＃13;
＆＃13; 
$(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");
    }
  });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

我创建了一个名为vegan的变量，并将值指定为true，但是当您不点击non-veg时，该值仍然为真。

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

希望这会对你有所帮助。

答案 1 :(得分：1)

试试这个。我认为它会对你有帮助。

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

});
});
相关问题
最新问题