jQuery的卡路里計算器不能添加超過1可變

我試圖建立一個卡路里計算器，它需要的屬性，如：jQuery的卡路里計算器不能添加超過1可變

素食素食 Ketogen 等

我設法宏量營養素工作，但我正在努力添加超過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); 
 
     } 
 

 
     // vegan  
 

 
     var vegan = false; 
 
     $(".ingredient.clicked").each(function() { 
 
      if (typeof $(this).attr("vegan") != "undefined") { 
 
       vegan = true; 
 
      } else { 
 
       vegan = false; 
 
       return false; 
 
      } 
 
     }); 
 

 

 

 
     if (vegan) { 
 
      $('#type').text("Ez az összeállítás Vegán"); 
 
      $('#typeImage').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png"); 
 
     } else { 
 
      $('#type').text(""); 
 

 
      $('#typeImage').attr("src", ""); 
 
     } 
 

 
    }); 
 

 

 
    // vegetarian 
 

 
    var vegetarian = false; 
 
    $(".ingredient.clicked").each(function() { 
 
     if (typeof $(this).attr("vegetarian") != "undefined") { 
 
      vegetarian = true; 
 
     } else { 
 
      vegetarian = false; 
 
      return false; 
 
     } 
 
    }); 
 

 
    if (vegetarian) { 
 
     $('#typeVega').text("Ez az összeállítás vegetáriánus"); 
 
     $('#typeImageVega').attr("src", "https://upload.wikimedia.org/wikipedia/hi/thumb/b/b2/Veg_symbol.svg/768px-Veg_symbol.svg.png"); 
 
    } else { 
 
     $('#typeVega').text(""); 
 

 
     $('#typeImageVega').attr("src", ""); 
 
    } 
 

 

 

 
});

div, 
 
p, 
 
h1 { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    display: block; 
 
} 
 

 
body { 
 
    font-size: 1.0rem; 
 
    font-family: sans-serif; 
 
    background: #42413f; 
 
} 
 

 
.header { 
 
    margin-bottom: 30px; 
 
    text-align: center; 
 
    margin-top: 30px; 
 
} 
 

 
.header img { 
 
    margin-bottom: 30px; 
 
} 
 

 
.header h1 { 
 
    font-size: 1.5rem; 
 
} 
 

 
.ingredients { 
 
    background: #f3f3f3 url(http://blog.padthaiwokbar.com/wp-content/uploads/2017/09/whiteback.jpg) center top repeat; 
 
    border-radius: 30px; 
 
    border: 4px solid #6FC0BB; 
 
    padding: 30px 60px; 
 
    max-width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.ingredients h2 { 
 
    width: 100%; 
 
    font-size: 1.1rem; 
 
    text-transform: uppercase; 
 
} 
 

 
.ingredient { 
 
    border: 2px solid #6FC0BB; 
 
    padding: 10px 20px; 
 
    border-radius: 5px; 
 
    margin-right: 20px; 
 
    margin-bottom: 20px; 
 
} 
 

 
.ingredient:hover { 
 
    cursor: pointer; 
 
    background-color: #6FC0BB; 
 
    color: #fff; 
 
    border: 2px solid #6FC0BB; 
 
} 
 

 
.ingredient:active { 
 
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.75); 
 
} 
 

 
.clicked { 
 
    background-color: #6FC0BB; 
 
    color: #fff; 
 
    border: 2px solid #282828; 
 
} 
 

 
.total { 
 
    margin-top: 30px; 
 
    font-weight: bold; 
 
    width: 100%; 
 
    font-size: 1.1rem; 
 
    text-transform: ; 
 
} 
 

 
//* fonts *// 
 
@font-face { 
 
    font-family: 'Lithos Pro Black'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    src: local('Li Pro Black'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Black.otf') format('opentype'); 
 
} 
 

 
@font-face { 
 
    font-family: 'Lithos Pro Regular'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    src: local('Lithos Pro Regular'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LithosPro-Regular.otf') format('opentype'); 
 
} 
 

 

 
/*@font-face { 
 
    font-family: 'Arial Narrow'; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    src: local('Arial Narrow'), url('http://blog.padthaiwokbar.com/wp-content/fonts/8098062665.ttf') format('truetype');*/ 
 

 
@font-face { 
 
    font-family: 'Lobster Two Italic'; 
 
    font-weight: normal; 
 
    font-style: normal; 
 
    src: local('Lobster Two Italic'), url('http://blog.padthaiwokbar.com/wp-content/fonts/LobsterTwo-Italic.otf') format('opentype'); 
 
} 
 

 
@font-face { 
 
    font-family: 'Proxima Nova'; 
 
    src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Proxima Nova Alt Condensed Light.otf'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
@font-face { 
 
    font-family: 'Proxima Nova'; 
 
    src: url ('http://blog.padthaiwokbar.com/content/fonts/Mark Simonson - Proxima Nova Thin.otf'); 
 
    font-weight: 100; 
 
    font-style: normal; 
 
} 
 

 
@font-face { 
 
    font-family: 'Proxima Nova'; 
 
    src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin Italic.otf'); 
 
    font-weight: 100; 
 
    font-style: italic; 
 
} 
 

 
@font-face { 
 
    font-family: 'Proxima Nova'; 
 
    src: url('http://blog.padthaiwokbar.com/wp-content/fonts/Mark Simonson - Proxima Nova Thin.otf'); 
 
    font-weight: 700; 
 
    font-style: italic; 
 
} 
 

 

 
/* Fontok */ 
 

 
p { 
 
    font-family: "Arial Narrow"; 
 
    font-weight: 100; 
 
    font-style: normal !important; 
 
} 
 

 
.h-landmark span { 
 
    font-family: 'Lithos Pro Black' !important; 
 
} 
 

 
h2 a, 
 
h3, 
 
h2 { 
 
    font-family: 'Lithos Pro' !important; 
 
    font-style: normal; 
 
    font-size: 1.5em !important; 
 
} 
 

 
.x-brand { 
 
    display: none; 
 
} 
 

 
.total { 
 
    font-family: 'Lobster Two' !important; 
 
    font-style: italic; 
 
    font-size: 1.3em !important; 
 
} 
 

 
.typeImage, 
 
typeImagevega { 
 
    height: 50px; 
 
    width; 
 
    50px; 
 
} 
 

 
.header img { 
 
    height: 50px; 
 
    width; 
 
    50px; 
 
}

<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" vegetarian vegan> 
 
       <p>Rice Noodles 
 
        <p> 
 

 
      </div> 
 
      <div class="ingredient" data-calories="300" data-carbs="150" data-fat="250" data-proteins="150" vegetarian vegan> 
 
       <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="50px" width="50px" alt="Select Something!" /> 
 
       <span id="type"></span> 
 
       <br> 
 
       <img id="typeImageVega" src="" height="50px" width="50px" alt="Test" /> 
 
       <span id="typeVega"></span> 
 
       <br> 
 
      </div> 
 

 
     </div> 
 
     <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> 
 

 
     <script src="js/index.js"></script> 
 

 
</body> 
 

 
</html>

來源

2017-09-27 Pbalazs89

請發表[最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve） – adiga

我不知道如何使這個更小。現在基本上有兩個重要的屬性：'純素'和'素食'。素食主義者爲包含'純素'屬性的項目完成工作，但'素食者'不包含。 – Pbalazs89

你並不需要你網站上的所有'css'和食物來重現這個問題。如果您只發布相關代碼，您將在發佈後幾分鐘內得到答案。沒有人有時間瀏覽1000行代碼並找到問題:) – adiga

的vegetarian相關的代碼是你$('.ingredient').click()處理程序之外。

$('.ingredient').click(function() { 
    // variables 
    // vegan code 
}); 

// vegetarian code

將它移動到純素塊下方的點擊處理程序中。

來源

2017-09-28 08:40:58 adiga

沒錯，就是這樣。謝謝你的回答！ – Pbalazs89

jQuery的卡路里計算器不能添加超過1可變

回答

相關問題