如何添加变量值

Question

嗨，我很抱歉，但我什至不知道我的标题应该是什么，我的脚本很好，但是我遇到了这个问题，我真的无法解决，因为我在编程方面并不那么好。我的代码只是添加了客户订单的总价值，以某种方式将每个项目的值暂时存储在DIV上，然后在其中动态打印值，目的是让我查看计算是否在起作用，现在我遇到问题我想删除DIV并仅留下总数。这是我的代码

$(document).ready(function() {
    $('input:radio[name="meal-356"]').change(function(ev){
        if ($(this).val() == 'Burger with fries') {
            var meal = 20;
        }
        else {
            var meal = 30;
        }
        $('#meal').text((meal).toFixed(2)).trigger('change');
    });
    $('input:radio[name="drinks-123"]').change(function(ev){
        if ($(this).val() == 'Ice Tea') {
            var drinks = 1;
        }
        else if ($(this).val() == 'Coke') {
            var drinks = 1.20;
        }
        else if ($(this).val() == 'Lemonade') {
            var drinks = 2;
        }
        else if ($(this).val() == 'Water') {
            var drinks = 1.75;
        }
        else if ($(this).val() == 'Hot choco') {
            var drinks = 3;
        }
        else if ($(this).val() == 'Hot coffee') {
            var drinks = 1.25;
        }
        else {
            var drinks = 0;
        }
        $('#drinks').text((drinks).toFixed(2)).trigger('change');
    });
    $('input:radio[name="extras-781"]').change(function(ev){
        if ($(this).val() == 'Rice') {
            var extras = 10;
        }
        else if ($(this).val() == 'Gravy') {
            var extras = 5;
        }
        else {
            var extras = 0;
        }
        $('#extras').text((extras).toFixed(2)).trigger('change');
    });
    $('textarea[name="spoon-112"]').keyup(function(ev){
        var spoon = $(this).val().replace(/n/g, '<br/>');
		var spoon = spoon*.25;
        $("#spoon").text(spoon).trigger('change');
    });
    $('input:text[name="fork-143"]').keyup(function(ev){
        var fork = $(this).val().replace(/n/g, '<br/>');
		var fork = fork*.5;
        $("#fork").text(fork).trigger('change');
    });
    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
        var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
            return acc + +val.textContent   ;
        }, 0);
        $('#total').text(total.toFixed(2));
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
    <label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
</div>
<div>
    <label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>
<h2>Question 2: drinks</h2>
<div class="drinks-123-wrapper">
    <input type="radio" name="drinks-123" value="Ice Tea" /> Ice Tea
    <input type="radio" name="drinks-123" value="Coke" /> Coke
    <input type="radio" name="drinks-123" value="Lemonade" /> Lemonade
    <input type="radio" name="drinks-123" value="Water" /> Water
    <input type="radio" name="drinks-123" value="Hot choco" /> Hot choco
    <input type="radio" name="drinks-123" value="Hot coffee" /> Hot coffee
    <input type="radio" name="drinks-123" value="No drinks-123" /> No drinks-123
</div>
<h2>Question 3: extras</h2>
<div class="drinks-wrapper">
    <input type="radio" name="extras-781" value="Rice" /> Rice
    <input type="radio" name="extras-781" value="Gravy" /> Gravy
    <input type="radio" name="extras-781" value="No Extra" /> No Extra
</div>
<h2>Question 4: How many extra spoon?</h2>
<div class="spoon-wrapper">
    <textarea name="spoon-112" rows="3"></textarea>
</div>
<h2>Question 5: How many extra fork?</h2>
<div class="fork-wrapper">
    <input name="fork-143" type="text" value="" placeholder=""/>
</div>
<hr />
<div class="price-wrapper">
    <b>meal:</b> <span id="meal"></span>
    <div></div>
    <b>drinks:</b> <span id="drinks"></span>
    <div></div>
    <b>extras:</b> <span id="extras"></span>
    <div></div>
    <b>spoon:</b> <span id="spoon"></span>
    <div></div>
    <b>fork:</b> <span id="fork"></span>
</div>
<div class="total-wrapper">
    <h3>
        <b>Total:</b><span id="total"></span>
    </h3>
</div>

我想实际上用ID #meal，#drinks，#extras，#spoon，#fork删除Divs，然后离开#Total ..但是问题在于它不会再计算了，我不知道该怎么办。。这是im卡住

的代码

    $('#meal, #drinks, #extras, #spoon, #fork').on('change', function(e) {
    var total = $('#meal, #drinks, #extras, #spoon, #fork').toArray().reduce(function(acc, val) {
        return acc + +val.textContent   ;
    }, 0);
    $('#total').text(total.toFixed(2));
})

Answer 1

如果您将价格信息添加到HTML中，例如使用data-price属性，则可以大量减少代码。但是，正如您所解释的那样，您无法更改HTML，第二好的选择是将价格存储在某些对象结构中。

建议的代码：

// Define the prices for each element selector, and with an 
// indication whether the count must be read from text
var unitPrices = [
//   element selector                       price has-count
    [":checked[value='Burger with fries']", 20.00,  0],
    [":checked[value='Chicken with rice']", 30.00,  0],
    [":checked[value='Ice Tea']",            1.00,  0],
    [":checked[value='Coke']",               1.20,  0],
    [":checked[value='Lemonade']",           2.00,  0],
    [":checked[value='Water']",              1.75,  0],
    [":checked[value='Hot choco']",          3.00,  0],
    [":checked[value='Hot coffee']",         1.25,  0],
    [":checked[value='No drinks-123']",      0.00,  0],
    [":checked[value='Rice']",              10.00,  0],
    [":checked[value='Gravy']",              5.00,  0],
    [":checked[value='No Extra']",           0.00,  0],
    ["[name=spoon-112]",                     0.25,  1],
    ["[name=fork-143]",                      0.50,  1],
];
function updateTotal() {
    // Iterate over all price elements, and apply the unit prices
    var prices = unitPrices.map(function (info) {
        var $elem = $(info[0]);
        // if the element does not match, return 0, else the price
        return $elem.length * info[1] *
            // and see if we need to read out the count        
            // if so: multiply by the entered number (ignore non-digits)
            (info[2] ? $elem.val().replace(/D/g, '') : 1 );
    });
    // Now we have an array of prices (numbers). Total them:
    var total = prices.reduce(function(acc, val) {
        return acc + val;
    }, 0);
    // Display the total:
    $('#total').text(total.toFixed(2));
}
$(function() {
    // Update the total on any change to input elements:
    $(':input').on('input change', updateTotal);
    // Also call it once when the page loads:
    updateTotal();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Calculator base on radio buttons</h1>
<h2>Question 1: meal</h2>
<div class="meal-wrapper">
    <label class="radio"><input name="meal-356" value="Burger with fries" type="radio"/>Burger with fries</label>
</div>
<div>
    <label class="radio"><input name="meal-356" value="Chicken with rice" type="radio" />Chicken with rice</label>
</div>
<h2>Question 2: drinks</h2>
<div class="drinks-123-wrapper">
    <input type="radio" name="drinks-123" value="Ice Tea" /> Ice Tea
    <input type="radio" name="drinks-123" value="Coke" /> Coke
    <input type="radio" name="drinks-123" value="Lemonade" /> Lemonade
    <input type="radio" name="drinks-123" value="Water" /> Water
    <input type="radio" name="drinks-123" value="Hot choco" /> Hot choco
    <input type="radio" name="drinks-123" value="Hot coffee" /> Hot coffee
    <input type="radio" name="drinks-123" value="No drinks-123" /> No drinks-123
</div>
<h2>Question 3: extras</h2>
<div class="drinks-wrapper">
    <input type="radio" name="extras-781" value="Rice" /> Rice
    <input type="radio" name="extras-781" value="Gravy" /> Gravy
    <input type="radio" name="extras-781" value="No Extra" /> No Extra
</div>
<h2>Question 4: How many extra spoons?</h2>
<div class="spoon-wrapper">
    <textarea name="spoon-112" rows="3" ></textarea>
</div>
<h2>Question 5: How many extra forks?</h2>
<div class="fork-wrapper">
    <input name="fork-143" type="text" value="" placeholder=""/>
</div>
<hr />
<div class="total-wrapper">
    <h3>
        <b>Total:</b><span id="total"></span>
    </h3>
</div>

确保以全页模式运行摘要。

Answer 2

您需要计算的数据存储在要删除的ID中。因此，请勿将它们从dom中删除，否则无法检索值以计算您的总数。为什么不只是将它们留在那里并通过CSS隐藏？

<div class="price-wrapper" style="display: none;">

演示：https：//jsfiddle.net/2emum57m/