1. 首页
  2. 问答
  3. jQuery卡路里计算器条件

jQuery卡路里计算器条件

2017-09-21 31 views
0

我正在构建卡路里计算器，并希望寻求一些帮助。下面的代码：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>

因此，这里是我的问题。我想创建基于不同饮食（古，素食，素食，生酮等）的菜单建议。

现在，我有一个项目的attr。素食主义者（椰子芯片），但条件不符合我希望他们的方式。我想要达到的目的是让这个人点击一个“非素食主义者”的项目，比如说鸡肉，并且弹出红色图标（到目前为止这么好），但是如果我之后点击椰子芯片，它会变成绿色。现在不应该发生^^。如果所有点击的项目都具有“纯素”属性，则会显示绿色按钮，否则显示为红色。如果没有项目被点击，按钮会消失。

预先感谢您！

来源

2017-09-21 Pbalazs89

+0

当你有一个HTML/js/css的问题和示例代码时，请确保使用内置的SO html/js/css代码片段。它使得阅读更容易，尤其是执行。还有什么你试图解决你的问题？ SO不是免费的编码服务，首先请尝试自己解决问题，当你完全没有想法然后张贴在SO上。谢谢！ –

回答

1

在这里，你有一个解决方案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) { 
 
    \t if(vegan) { 
 
     \t $('#type').text("This is Vegan!"); 
 
     \t $('#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，值仍然如此。

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

希望这会帮助你。

来源

2017-09-21 09:05:53 Shiladitya

+0

@Shiladtya非常感谢你，就是这样！ – Pbalazs89

+0

@ Pbalazs89欢迎伙伴:) – Shiladitya

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

}); 
});

来源

2017-09-21 10:51:35 soztrk

+0

谢谢你的帮助！ – Pbalazs89

相关问题

 相关问题