Javascript

Question

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

餐厅提供各种食物，您可以安排菜单项。例如，其中一些是素食主义者。如果一个项目是 'vegan'，我希望弹出一个图像，但是如果客户选择另一个不是 'vegan' 的项目，那么图像就会消失/变灰。

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

我真正需要的只是如何操作的示例或一些提示。

Answer 1

你想要这样的东西吗？

基本上我把计算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>

Javascript - 饮食偏好的条件格式

Javascript - conditional formatting for diet preferences

html

jquery

conditional

boolean