嗨，大家好抱歉，但我甚至不知道标题应该是什么我有这个脚本完美的工作但我有这个问题，我真的无法解决因为我不是真的很好的编程。我的代码只是简单地添加客户订单的总价值，不知何故，每个项目的价值临时存储在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，＃swon，＃fork的div，只留下#total ..但问题是它不再计算了，我不知道该怎么做..这是我卡住的代码
$('#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));
})
答案 0 :(得分：0)
计算总数的所需数据存储在您要删除的ID中。因此，请勿从DOM中删除它们，否则无法检索这些值来计算总数。为什么不把它们留在那里并通过CSS隐藏它？
<div class="price-wrapper" style="display: none;">
答案 1 :(得分：0)
如果您要在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>
确保以整页模式运行代码段。