vegan

vegan

关注
发信
关注(28)粉丝(399)

javascript - 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">
	<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>

我真正需要的是一个如何做到这一点的例子或一些提示。

最佳答案

你想要这样的东西吗？
基本上，我在click函数中移动了计算其vegan或non-veg的部分。然后我改变了逻辑来检查属性是否存在，最后我在一些输出元素中添加了一个图像和文本。
测试：
请注意，只有内容Coconut Chips的div具有vegan属性。所以用它来测试！

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

08-08 08:59
Powered by LMLPHP ©2024 vegan 0.047097