Javascript - 饮食偏好的条件格式答案

【问题标题】：Javascript - conditional formatting for diet preferencesJavascript - 饮食偏好的条件格式
【发布时间】：2018-03-01 04:39:04
【问题描述】：

我正在构建一个卡路里计算器，需要一些帮助来实现以下功能。

餐厅提供各种食物，您可以安排菜单项。例如，其中一些是素食主义者。如果某件商品是“素食主义者”，我希望弹出一张图片，但如果客户选择了另一件不是“素食主义者”的商品，那么该图片就会消失/变灰。

我设法进行了设置，以便计算卡路里，但我不知道后者的最佳方法是什么。这是我的 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>

我真正需要的只是一个示例或一些提示。

【问题讨论】：

比如+totalFats.html(currentFats - fat);前面的+运算符的作用是什么？至于您的问题：使用声明 display:none 定义一个 CSS 选择器。如果要隐藏它，请将其添加到图像中，然后将其删除以显示图像。或者使用JQuery的.show()和.hide()。

标签： javascript jquery html boolean conditional

【解决方案1】：

你想要这样的东西吗？

基本上，我在 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>

【讨论】：

是的，Naren 谢谢！就是这样！好吧，几乎完全一样，现在我缺少的是，如果我多次单击一个项目，它会在单击后继续添加卡路里而不是减去（您应该只能添加一次，然后删除它们。）你知道这可能是什么原因吗？
@Pbalazs89 我改变了逻辑，你能确认它是你想要的吗？