我正在构建一个卡路里计算器，需要一些帮助来实现以下内容。
餐厅提供各种物品，您可以自行安排菜单。其中一些是素食主义者。如果某个项目是“素食主义者”，我想要一个图像弹出，但如果客户选择了另一个不是“素食主义者”的项目，那么图像会真正消失/灰显。
我设法设置了卡路里，但我不知道后者的最佳方法是什么。这是我的Javascript代码。
$(document).ready(function() {
$('.ingredient').click(function() {
var totalNum = $('#total');
var totalCarbs = $('#totalCarbs');
var totalFats = $('#totalFats');
var totalProteins = $('#totalProteins');
var pressed = $(this).data('pressed');
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);
}
$(this).data("pressed", !pressed);
});
});
var vegan = $(this).data('vegan')
if (vegan === true)
{
document.write("This is Vegan!")
}
else
{
document.write("This is not Vegan!")
};
和HTML
<!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>Bases</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" data-vegan="true" >
<p>Rice Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250" data-vegan="False">
<p>Egg Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Vermicelli
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Whole Grain Noodle
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>White Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Brown Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Vegetable Base
<p>
</div>
<h2>Proteins</h2>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Chicken
<p>
</div>
<div class="ingredient" data-calories="250" data-carbs="250">
<p>Pork
<p>
</div>
<div class="ingredient" data-calories="500" data-carbs="250">
<p>Smoked Tofu
<p>
</div>
<div class="ingredient" data-calories="250" data-carbs="250">
<p>Beef
<p>
</div>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Duck
<p>
</div>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Prawns
<p>
</div>
<h2>Toppings</h2>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Vegetable Mix
<p>
</div>
<div class="ingredient" data-calories="50" data-carbs="250">
<p>Cashew
<p>
</div>
<div class="ingredient" data-calories="20" data-carbs="250">
<p>Sweet Peppers Mix
<p>
</div>
<div class="ingredient" data-calories="60" data-carbs="250">
<p>Wood Ear Mushroom
<p>
</div>
<div class="ingredient" data-calories="70" data-carbs="250">
<p>Mushroom
<p>
</div>
<div class="ingredient" data-calories="50" data-carbs="250">
<p>Pineapple
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Bamboo Shots
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Chinese Cabbage
<p>
</div>
<h2>Warm Sauces</h2>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Thailand-Padthai
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Chinese Sweet and Sour
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Burma- Green Curry
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Indonesia- Satay
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Laosz- Red Curry
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Japan- Teriyaki
<p>
</div>
<h2>Extra Toppings</h2>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Roasted Peanut
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Coriander
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Sesame Seed
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Basil
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Coconut Chips
<p>
</div>
<h2>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>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
我真正需要的只是一个例子，如何做到这一点或一些提示。
答案 0 :(得分：2)
你想要这样的东西吗？
基本上我移动了计算点击功能中vegan或non-veg的部分。然后我改变了检查属性是否存在的逻辑，最后我在一些输出元素中添加了一个图像和文本。
<强>测试
请注意，只有内容为Coconut Chips的div才具有素食属性。所以用它进行测试！
$(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");
};
});
});.clicked{
border: 1px solid red;
}<!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>Bases</h2>
<div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" data-vegan="true" >
<p>Rice Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250" data-vegan="False">
<p>Egg Noodles
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Vermicelli
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Whole Grain Noodle
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>White Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Brown Rice
<p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Vegetable Base
<p>
</div>
<h2>Proteins</h2>
<div class="ingredient" data-calories="300" data-carbs="250">
<p>Chicken
<p>
</div>
<div class="ingredient" data-calories="250" data-carbs="250">
<p>Pork
<p>
</div>
<div class="ingredient" data-calories="500" data-carbs="250">
<p>Smoked Tofu
<p>
</div>
<div class="ingredient" data-calories="250" data-carbs="250">
<p>Beef
<p>
</div>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Duck
<p>
</div>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Prawns
<p>
</div>
<h2>Toppings</h2>
<div class="ingredient" data-calories="450" data-carbs="250">
<p>Vegetable Mix
<p>
</div>
<div class="ingredient" data-calories="50" data-carbs="250">
<p>Cashew
<p>
</div>
<div class="ingredient" data-calories="20" data-carbs="250">
<p>Sweet Peppers Mix
<p>
</div>
<div class="ingredient" data-calories="60" data-carbs="250">
<p>Wood Ear Mushroom
<p>
</div>
<div class="ingredient" data-calories="70" data-carbs="250">
<p>Mushroom
<p>
</div>
<div class="ingredient" data-calories="50" data-carbs="250">
<p>Pineapple
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Bamboo Shots
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Chinese Cabbage
<p>
</div>
<h2>Warm Sauces</h2>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Thailand-Padthai
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Chinese Sweet and Sour
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Burma- Green Curry
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Indonesia- Satay
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Laosz- Red Curry
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Japan- Teriyaki
<p>
</div>
<h2>Extra Toppings</h2>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Roasted Peanut
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Coriander
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Sesame Seed
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250">
<p>Basil
<p>
</div>
<div class="ingredient" data-calories="40" data-carbs="250" vegan>
<p>Coconut Chips
<p>
</div>
<h2>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>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>