Question

我正在尝试制作营养计算器。它应该是单选按钮中的值并显示值，但我不知道为什么它不起作用。下面的代码似乎不起作用。

<html>
<head>

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
$('.options').on('change', 'input', function() {
    var $self = $(this);
    var inputType = $self.attr('type');

    if (inputType == 'radio') {
        $self.parent('li').addClass('active').siblings().removeClass('active');
    } else if (inputType == 'checkbox') {
        $self.parent('li').toggleClass('active');
    }
    runUpdate();
});

});

function runUpdate() {

//get the sum of the elements

var calories = $(".caloriesSum", '.active').sum();
var fat = $(".fatSum", '.active').sum();
var satfat = $(".satfatSum", '.active').sum();
var carbs = $(".carbsSum", '.active').sum();
var protein = $(".proteinSum", '.active').sum();
var sodium = $(".sodiumSum", '.active').sum();
var chloresterol = $(".chloesterolSum", '.active').sum();

//update the total

$("#totalCalories").text(+calories.toString());
$("#totalFat").text(+fat.toString());
$("#totalSatFat").text(+satfat.toString());
$("#totalCarbs").text(+carbs.toString());
$("#totalProtein").text(+protein.toString());
$("#totalSodium").text(+sodium.toString());
$("#totalChloresterol").text(+chloresterol.toString());
}?
 </script>


<style type="text/css">
ul.options li span {display:none;}
#totals {padding:20px; background:#eee;}
#totals span {font-weight:bold;}
h4,ul {margin:0 0 15px;}
</style>

</head>
<body>

<form action="" method="post" id="nutform" onsubmit="return false;">
        <h2>Taqueria Nutritionals</h2>

        <h4>Pick Your Meal</h4>

  <!--Radio Buttons with Values -->

        <ul class="options">
            <li>
                <input type="radio" id="wwheatt" name="meal"     value="whole_wheat_tortilla"> Whole Wheat Tortilla

   <!-- This class contains the values that it should add -->

                <span class="caloriesSum">280</span>
                <span class="fatSum">6</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">44</span>
                <span class="proteinSum">8</span>
                <span class="sodiumSum">340</span>
                <span class="chloesterolSum">0</span>
            </li>
            <li>
                <input type="radio" name="meal" value="flour_tortilla" > Flour Tortilla
                <span class="caloriesSum">290</span>
                <span class="fatSum">6</span>
                <span class="satfatSum">2</span>
                <span class="carbsSum">49</span>
                <span class="proteinSum">9</span>
                <span class="sodiumSum">770</span>
                <span class="chloesterolSum">0</span>
            </li>
            <li>
                <input type="radio" name="meal" value="naked" > Naked, zero nutrients
                <span class="caloriesSum">0</span>
                <span class="fatSum">0</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">0</span>
                <span class="proteinSum">0</span>
                <span class="sodiumSum">0</span>
                <span class="chloesterolSum">0</span>
            </li>
        </ul>

        <h4>Select Your Protein</h4>

        <ul class="options">
            <li>
                <input type="radio" name="protein" value="steak" > Steak
                <span class="caloriesSum">230</span>
                <span class="fatSum">9</span>
                <span class="satfatSum">3</span>
                <span class="carbsSum">3</span>
                <span class="proteinSum">32</span>
                <span class="sodiumSum">170</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="carnitas" > Carnitas
                <span class="caloriesSum">210</span>
                <span class="fatSum">9</span>
                <span class="satfatSum">3</span>
                <span class="carbsSum">2</span>
                <span class="proteinSum">29</span>
                <span class="sodiumSum">490</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="chicken" > Chicken
                <span class="caloriesSum">190</span>
                <span class="fatSum">2</span>
                <span class="satfatSum">0</span>
                <span class="carbsSum">4</span>
                <span class="proteinSum">35</span>
                <span class="sodiumSum">560</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="radio" name="protein" value="tofu"> Tofu
            </li>
        </ul>

        <h4>The Add-ins</h4>

        <ul class="options">
            <li>
                <input type="checkbox" name="the_addins" value="white_rice"> White Rice
            <span class="fatSum">9</span>
                <span class="satfatSum">3</span>
                <span class="carbsSum">2</span>
                <span class="proteinSum">29</span>
                <span class="sodiumSum">490</span>
                <span class="chloesterolSum">90</span>
            </li>
            <li>
                <input type="checkbox" name="the_addins" value="brown_rice"> Brown Rice
            </li>
            <li>
                <input type="checkbox" name="the_addins" value="black_beans"> Black                                    Beans
            </li>
            <li>
                <input type="checkbox" name="the_addins" value="pinto_beans"> Pinto Beans
            </li>
        </ul>

        <h4>Salsas</h4>

        <ul class="options">
            <li>
                <input type="checkbox" name="salsas" value="pico_de_gallo"> Pico De Gallo
            </li>
            <li>
                <input type="checkbox" name="salsas" value="tomatillo_salsa"> Tomatillo Salsa
            </li>
            <li>
                <input type="checkbox" name="salsas" value="roasted_corn_salsa"> Roasted Corn Salsa
            </li>
            <li>
                <input type="checkbox" name="salsas" value="fire_roasted_red_salsa"> Fire Roasted Red Salsa
            </li>
        </ul>    

        <h4>Add-ins</h4>

        <ul class="options">
            <li>
                <input type="checkbox" name="addins" value="lettuce"> Lettuce
            </li>
            <li>
                <input type="checkbox" name="addins" value="shredded_cheese"> Shredded Cheese
            </li>
            <li>
                <input type="checkbox" name="addins" value="crema"> Crema
            </li>
            <li>
                <input type="checkbox" name="addins" value="chipotle_crema"> Chipotle Crema
            </li>
            <li>
                <input type="checkbox" name="addins" value="guacamole"> Guacamole
            </li>
        </ul>            


  <!-- This is where the values should display -->

        <div id="totals">

            <h4>Totals</h4>

            <ul>


                <li>Calories: <span id="totalCalories"> </span></li>
                <li>Fat: <span id="totalFat"> </span>g</li>
                <li>Sat. Fat: <span id="totalSatFat"> </span>g</li>
                <li>Carbs: <span id="totalCarbs"> </span>g</li>
                <li>Protein: <span id="totalProtein"> </span>g</li>
                <li>Sodium: <span id="totalSodium"> </span>mg</li>
                <li>Cholesterol: <span id="totalChloresterol"> </span>mg</li>
            </ul>
        </div>
  <!-- #totals -->

  </form>

    </body>

    </html>

Answer 1

你似乎错过了一个$ .sum插件，它添加了jQuery集合的值。我放了一个（first hit on a Google search），你的代码工作正常。

http://jsfiddle.net/QM9gP/

$.fn.sum = function() {
    var sum = 0; 
    this.each(function() {
        if ( $(this).is(':input') ) {
            var val = $(this).val();
        } else {
            var val = $(this).text();
        }
        sum += parseFloat( ('0' + val).replace(/[^0-9-\.]/g, ''), 10 );
    });
    return sum;
};

$('.options').on('change', 'input', function() {
    var $self = $(this);
    var inputType = $self.attr('type');

    if (inputType == 'radio') {
        $self.parent('li').addClass('active').siblings().removeClass('active');
    } else if (inputType == 'checkbox') {
        $self.parent('li').toggleClass('active');
    }
    runUpdate();
});

function runUpdate() {
  console.log('run update');

    // get the sum of the elements

    var calories = $(".caloriesSum", '.active').sum();
    var fat = $(".fatSum", '.active').sum();
    var satfat = $(".satfatSum", '.active').sum();
    var carbs = $(".carbsSum", '.active').sum();
    var protein = $(".proteinSum", '.active').sum();
    var sodium = $(".sodiumSum", '.active').sum();
    var chloresterol = $(".chloesterolSum", '.active').sum();

    // update the total

    $("#totalCalories").text(+calories.toString());
    $("#totalFat").text(+fat.toString());
    $("#totalSatFat").text(+satfat.toString());
    $("#totalCarbs").text(+carbs.toString());
    $("#totalProtein").text(+protein.toString());
    $("#totalSodium").text(+sodium.toString());
    $("#totalChloresterol").text(+chloresterol.toString());
}

计算单选按钮中的值

1 个答案: