1. 首頁
  2. 問答
  3. jQuery卡路里計算器條件

jQuery卡路里計算器條件

2017-09-21 32 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

相關問題

 相關問題