Question

我正在尝试建立一个卡路里计算器，它具有以下属性：

严格的素食者素 Ketogen 等

我设法让常量营养素起作用，但是我在为这个等式添加超过1个条件时苦苦挣扎。＆＃39;纯素＆＃39;工作正常，但使用相同的代码为另一个属性＆＃39;素食＆＃39;没有结果。我确定它在某个地方是一个逻辑错误，但我无法弄明白。

这是我的代码：

＆＃13;

$(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", "");
    }



});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

vegetarian相关代码位于$('.ingredient').click()处理程序之外。

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

// vegetarian code

将其移动到素食块下方的点击处理程序中。

Jquery卡路里计算器不能添加超过1个变量

1 个答案: