2
我正在構建卡路里計算器，需要一些幫助來實現以下功能。Javascript - 用於飲食偏好的條件格式化
餐廳提供各種物品，並安排您的菜單項。例如，其中一些是素食主義者。如果某件商品是「純素」，我希望有一張圖片可以彈出，但如果顧客選擇了另一件不是「純素」的商品，那麼圖片就會消失或者變灰。
我設法建立了這樣的熱量計數，但我不知道做後者的最佳方法是什麼。這是我的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">
\t <img src="http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/logofinal.png" alt="padthai wokbar" style="width:300px;">
\t <h1>How did you build your bowl?</h1>
\t <p>Select all the ingredients you added to your padthai wokbar meal and we'll do the rest.</p>
\t <br>
<div class="ingredients">
<h2>Bases</h2>
\t <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" data-vegan="true" >
\t \t <p>Rice Noodles
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250" data-vegan="False">
\t \t <p>Egg Noodles
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>Vermicelli
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>Whole Grain Noodle
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>White Rice
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>Brown Rice
\t \t \t <p>
</div>
<div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>Vegetable Base
\t \t \t <p>
</div>
\t <h2>Proteins</h2>
\t <div class="ingredient" data-calories="300" data-carbs="250">
\t \t <p>Chicken
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="250" data-carbs="250">
\t \t <p>Pork
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="500" data-carbs="250">
\t \t <p>Smoked Tofu
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="250" data-carbs="250">
\t \t <p>Beef
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="450" data-carbs="250">
\t \t <p>Duck
\t \t \t <p>
\t </div>
<div class="ingredient" data-calories="450" data-carbs="250">
\t \t <p>Prawns
\t \t \t <p>
\t </div>
\t <h2>Toppings</h2>
\t <div class="ingredient" data-calories="450" data-carbs="250">
\t \t <p>Vegetable Mix
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="50" data-carbs="250">
\t \t <p>Cashew
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="20" data-carbs="250">
\t \t <p>Sweet Peppers Mix
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="60" data-carbs="250">
\t \t <p>Wood Ear Mushroom
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="70" data-carbs="250">
\t \t <p>Mushroom
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="50" data-carbs="250">
\t \t <p>Pineapple
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Bamboo Shots
\t \t \t <p>
\t </div>
<div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Chinese Cabbage
\t \t \t <p>
\t </div>
\t <h2>Warm Sauces</h2>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Thailand-Padthai
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Chinese Sweet and Sour
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Burma- Green Curry
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Indonesia- Satay
\t \t \t <p>
\t </div>
<div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Laosz- Red Curry
\t \t \t <p>
\t </div>
<div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Japan- Teriyaki
\t \t \t <p>
\t </div>
\t <h2>Extra Toppings</h2>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Roasted Peanut
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Coriander
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Sesame Seed
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Basil
\t \t \t <p>
\t </div>
<div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Coconut Chips
\t \t \t <p>
\t </div>
\t <h2>Desserts</h2>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Cumin Lemon Vinaigrette
\t \t \t <p>
\t </div>
\t <div class="ingredient" data-calories="40" data-carbs="250">
\t \t <p>Honey Cilantro Vinaigrette
\t \t \t <p>
\t </div>
\t <div class="total">
\t \t Total calories: <span id="total"></span>
Total Carbs:<span id="totalCarbs"></span>
Total Fat:<span id="totalFats"></span>
Total Protein:<span id="totalProteins"></span>
\t </div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>所有我需要的真的是一個例子，如何做到這一點或一些提示。
什麼是'+'經營者面前的功能，例如，'+ totalFats.html（currentFats - 脂肪）;'？至於你的問題：用聲明'display：none'定義一個CSS選擇器。如果要隱藏圖像，請將其添加到圖像中，然後將其刪除以顯示圖像。或者使用JQuery的'.show（）'和'.hide（）'。 –