1

ここで jQuery 計算プラグインを使用しています: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

ここに jsFiddle があります: http://jsfiddle.net/k3edG/4/

ご覧のとおり、複数のラジオ ボタンがあります。現在、ラジオ ボタンと並んで、合計領域にすべての栄養データを合計するスパンがあります。

私がやりたいことは、ユーザーが関連するラジオ ボタンを選択した場合にのみ、各栄養項目の合計を計算することです。

個々のラジオ ボタンごとに onclick イベントを実行することを考えましたが、まだどこにも到達できていません。

何かご意見は？

$(document).ready(function() {



// get the sum of the elements
var calories = $(".caloriesSum").sum();
var fat = $(".fatSum").sum();
var satfat = $(".satfatSum").sum();
var carbs = $(".carbsSum").sum();
var protein = $(".proteinSum").sum();
var sodium = $(".sodiumSum").sum();
var chloresterol = $(".chloesterolSum").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());


}); 


<h4>Pick Your Meal</h4>

        <ul class="options">
            <li>
                <input type="radio" id="wwheatt" name="meal" value="whole_wheat_tortilla"> Whole Wheat Tortilla
                <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>
4

1 に答える 1

1

非常に基本的です。しかし、これはあなたが求めているようなものですか？http://jsfiddle.net/k3edG/3/

私がやったこと<li />は、選択されたオプションを持つにアクティブなクラスを追加することです。次に、元の更新関数を変更して、アクティブなアイテムの値のみを追加しました。

チェックボックスの項目とラジオの栄養情報があると思いました

それが役立つことを願っています：D

于 2012-11-28T16:09:43.497 に答える