我正在建立一个通过单选按钮组选择的卡订购站点。我想出了这一点来增加总成本。我让基本卡价格正常工作，但是当我似乎使用相同的逻辑来增加额外费用时，似乎似乎无法弄清总的累加功能。
PS-抱歉帖子一团糟
我添加了控制台日志以查找错误，但是在执行该过程时没有出现。
// create a variables
var selectedCardPricePer;
var cardOneQty;
var cardOneCombinedPricePer;
var cardOneSubtotal;
let paperType;
let envType;
let totalPricePer;
// Get base price based on selected card
$('input:radio[name="img-select"]').change(
function() {
// select the checked radio button, grab the "ratio" attribute, and save it as "selectedCardType"
var selectedCardType = $('input:radio[name="img-select"]:checked').attr('ratio');
console.log('selectedCardType = %s', selectedCardType);
// BASE PRICES
// grab the price for the price per card depending on the selected card type
if (selectedCardType == '5x7') {
selectedCardPricePer = 0.10; // price per 5x7 card
} else if (selectedCardType == '7x5') {
selectedCardPricePer = 0.15; // price per 7x5 card
} else if (selectedCardType == '4x8p5') {
selectedCardPricePer = 0.00; // price per 4x8.5 calendar card
} else if (selectedCardType == '8p5x4') {
selectedCardPricePer = 0.00; // price per 8.5x4 calendar card
} else {
console.log('selectedCardType = %s', selectedCardType);
console.log('selectedCardType does not have an associated price!');
}
console.log('selectedCardPricePer = %s', selectedCardPricePer);
// "selectedCardPricePer" should be relevant per the selected card
}
);
// create the paper price variable
var addPricePerPaper = 0;
// paper prices
$('input:radio[name="paper-select"]').change(
function() {
var selectedPaper;
// select the checked radio button, grab the "ratio" attribute, and save it as "selectedCardType"
var selectedPaper = $('input:radio[name="paper-select"]:checked').val();
console.log('selectedPaper = %s', selectedPaper);
// grab the price for the price per card depending on the selected card type
if (selectedPaper == 'Premium Paper') {
addPricePerPaper = 0.10; // price per premium
} else if (selectedPaper == 'Standard Paper') {
addPricePerPaper = 0; // price per standard
} else {
console.log('selectedPaper does not equal an appropriate value');
}
console.log('addPricePerPaper = %s', addPricePerPaper);
// 'addPricePerPaper' should be relevant per the selected paper.
}
);
// create the envelope price variable
var addPricePerEnvelope = 0;
// env prices
$('input:radio[name="env-select"]').change(
function() {
// select the checked radio button, grab the value.
var selectedEnvelope = $('input:radio[name="env-select"]:checked').attr('material');
console.log('selectedEnvelope = %s', selectedEnvelope);
// grab the price for the price per card depending on the selected card type
if (selectedEnvelope == 'standard') {
addPricePerEnvelope = 0; // price per
} else if (selectedEnvelope == 'linen') {
addPricePerEnvelope = 0.10; // price per
} else if (selectedEnvelope == 'foil') {
addPricePerEnvelope = 0.15; // price per
} else if (selectedEnvelope == 'none') {
addPricePerEnvelope = 0; // price per
} else {
console.log('selectedEnvelope did not equal an appropriate value');
}
console.log('addPricePerEnvelope = %s', addPricePerEnvelope);
// addPricePerEnvelope should equal the extra price per envelope
}
);
var addPricePerPrintedReturn = 0;
// Create the printed return price variable
$('input:checkbox[name="env-printed-return"]').change(
function() {
// set the variable to false first, in case it is not checked
var checkedReturn = false;
// check if the checkbox is checked, if so, this sets the variable to true
checkedReturn = $('input:checkbox[name="env-printed-return"]').prop('checked');
console.log('checkedReturn = %s', checkedReturn);
// if the variable is true, add a price, if not, don't.
if (checkedReturn == true) {
addPricePerPrintedReturn = 0.05;
} else {
addPricePerPrintedReturn = 0;
}
console.log('addPricePerPrintedReturn = %s', addPricePerPrintedReturn);
// addPricePerPrintedReturn should equal the extra price per return address addition
}
)
/*
Up to this point, we should have several variables set per the following:
- selectedCardPricePer = base price per card
- addPricePerPaper = extra price per card, for a paper option
- addPricePerEnvelope = extra price per env, for a env option
- addPricePerPrintedReturn = extra price to print return addresses on envs, if selected
*/
// watch qty
$('input[name="quantity-field-one"]').change(
function () {
// grab the quantity
cardOneQty = $('input[name="quantity-field-one"]').val();
}
);
// I'll need to come back to this
$('input:radio[name="img-select"]').change(updateCardOnePricing());
$('input:radio[name="paper-select"]').change(updateCardOnePricing());
$('input:radio[name="env-select"]').change(updateCardOnePricing());
$('input:checkbox[name="env-printed-return"]').change(updateCardOnePricing());
$('input[name="quantity-field-one"]').change(updateCardOnePricing());
// Update Pricing Function
function updateCardOnePricing() {
console.log('updateCardOnePricing triggered.');
console.log('selectedCardPricePer = %s', selectedCardPricePer);
console.log('addPricePerPaper = %s', addPricePerPaper);
console.log('addPricePerEnvelope = %s', addPricePerEnvelope);
console.log('addPricePerPrintedReturn = %s', addPricePerPrintedReturn);
console.log('cardOneQty = %s', cardOneQty);
// add up the total cost per card
cardOneCombinedPricePer = selectedCardPricePer + addPricePerPaper + addPricePerEnvelope + addPricePerPrintedReturn;
console.log('cardOneCombinedPricePer = %s', cardOneCombinedPricePer);
// combine the quantity with price to get subtotal
cardOneSubtotal = cardOneQty * cardOneCombinedPricePer;
console.log('cardOneSubtotal = %s', cardOneSubtotal);
// round to nearest tenth
cardOneSubtotal = Number(Math.round(cardOneSubtotal+'e2')+'e-2');
// fix deicmals to make sense for monies
cardOneSubtotal = cardOneSubtotal.toFixed(2);
$('#card1-subtotal').html(cardOneSubtotal);
}
////// HTML下方
<div class="radio-button">
<input type="radio" name="paper-select" id="paper-opt1" value="Standard Paper" checked="checked" />
<label material="Standard">
Standard paper
</label>
<div class="clearfloat"></div>
</div>
<div class="radio-button">
<input type="radio" name="paper-select" id="paper-opt2" value="Premium Paper" material="Premium" />
<label >
Premium (+ $0.10 per)
</label>
<div class="clearfloat"></div>
</div>
<br />
<span class="step-label">
Envelope Options
</span>
<div class="radio-button">
<input type="radio" name="env-select" id="env-opt1" value="No Envelope" material="none" />
<label >
No Envelope
</label>
<div class="clearfloat"></div>
</div>
<div class="radio-button">
<input type="radio" name="env-select" id="env-opt2" value="Standard Non-Printed Envelope" material="standard" checked="checked"/>
<label >
Standard Non-Printed Envelope (+ $0.00 per)
</label>
<div class="clearfloat"></div>
</div>
<div class="radio-button">
<input type="radio" name="env-select" id="env-opt3" value="Linen Envelope" material="linen"/>
<label >
Linen Envelope (+ $0.10 per)
</label>
<div class="clearfloat"></div>
</div>
<div class="radio-button">
<input type="radio" name="env-select" id="env-opt4" value="Foil-Lined Envelope" material="foil"/>
<label >
Foil-Lined Envelope (+ $0.15 per)
</label>
<div class="clearfloat"></div>
</div>
<div class="radio-button">
<input type="checkbox" name="env-printed-return" id="env-opt5" value="Printed Return Address" material="return"/>
<label >
Printed Return Address (+ $0.05 per)
</label>
<div class="clearfloat"></div>
</div>
</div>
<div class="p under">
<label for="quantity-field-one">
<span class="step-label">
Quantity:
</span>
<input type="number" name="quantity-field-one" id="quantity-field-one" required>
<div class="clearfloat"></div>
</label>
<div class="subtotal">
<p>
Price per card
<strong>
$
<span id="card1-ppc">
<em>Please select a card.</em>
</span> <!-- price per card appended here -->
</strong>
</p>
</div>
<div class="total">
<p>
Subtotal
<strong>
$
<span id="card1-subtotal">
<em>Please enter a quantity.</em>
</span> <!-- price subtotal for this card appended here -->
</strong>
</p>
</div>
答案 0 :(得分：0)
当处理具有相同名称/类的多个元素上的事件时，应使用关键字“ this”来引用函数内的元素，否则，您始终会引用集合的第一个元素。所有事件处理程序都存在相同的问题。
基本上就是这样：
$('input:radio[name="img-select"]').change(
function() {
// select the checked radio button, grab the "ratio" attribute, and save it as "selectedCardType"
var selectedCardType = $('input:radio[name="img-select"]:checked').attr('ratio');
应如下所示：
$('input:radio[name="img-select"]').change(
function() {
// select the checked radio button, grab the "ratio" attribute, and save it as "selectedCardType"
var selectedCardType = $(this).attr('ratio');
在所有事件处理程序中。
请注意，使用$（this）来引用当前元素，而并非总是第一个。