我正在开发一个票务小部件。门票类型很少，每种门票类型还有 3 种门票选项。当用户开始输入一种门票类型的数量时，应禁用其他门票类型的门票选项。如果用户删除这些值或将值设置回零，则应再次启用其他票证类型的票证选项。
总计摘要部分应显示基于输入的总数量和总成本。
这是我的代码笔：https://codepen.io/CodingPupil/pen/zYbqPxw
启用/禁用票证选项工作正常。但它仅计算第一行票类型的总数。如果我将值输入到第二或第三或任何其他票据类型，则不会计算总数。您能否调试我的 jQuery 代码，以便它显示所有票证类型的正确总数？
检查我的代码笔到目前为止我已经尝试过的内容： https://codepen.io/CodingPupil/pen/zYbqPxw
HTML：
<div class="ticket-section">
<div class="ticket-type" data-ticket-type="grandstand">
<h3>Grandstand</h3>
<div class="ticket-options">
<div class="ticket-option">
<label>Adult:</label>
<input type="number" class="ticket-qty" data-type="grandstand" data-option="adult" min="0" value="0">
</div>
<div class="ticket-option">
<label>Child/OAP:</label>
<input type="number" class="ticket-qty" data-type="grandstand" data-option="child_oap" min="0" value="0">
</div>
<div class="ticket-option">
<label>Young Child:</label>
<input type="number" class="ticket-qty" data-type="grandstand" data-option="young_child" min="0" value="0">
</div>
</div>
</div>
<div class="ticket-type" data-ticket-type="grandstand-side">
<h3>Grandstand Side</h3>
<div class="ticket-options">
<div class="ticket-option">
<label>Adult:</label>
<input type="number" class="ticket-qty" data-type="grandstand-side" data-option="adult" min="0" value="0">
</div>
<div class="ticket-option">
<label>Child/OAP:</label>
<input type="number" class="ticket-qty" data-type="grandstand-side" data-option="child_oap" min="0" value="0">
</div>
<div class="ticket-option">
<label>Young Child:</label>
<input type="number" class="ticket-qty" data-type="grandstand-side" data-option="young_child" min="0" value="0">
</div>
</div>
</div>
<div class="ticket-type" data-ticket-type="ringside-row-1">
<h3>Ringside Row 1</h3>
<div class="ticket-options">
<div class="ticket-option">
<label>Adult:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="adult" min="0" value="0">
</div>
<div class="ticket-option">
<label>Child/OAP:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="child_oap" min="0" value="0">
</div>
<div class="ticket-option">
<label>Young Child:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-1" data-option="young_child" min="0" value="0">
</div>
</div>
</div>
<div class="ticket-type" data-ticket-type="ringside-row-2">
<h3>Ringside Row 2</h3>
<div class="ticket-options">
<div class="ticket-option">
<label>Adult:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="adult" min="0" value="0">
</div>
<div class="ticket-option">
<label>Child/OAP:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="child_oap" min="0" value="0">
</div>
<div class="ticket-option">
<label>Young Child:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-2" data-option="young_child" min="0" value="0">
</div>
</div>
</div>
<div class="ticket-type" data-ticket-type="ringside-row-3">
<h3>Ringside Row 3</h3>
<div class="ticket-options">
<div class="ticket-option">
<label>Adult:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="adult" min="0" value="0">
</div>
<div class="ticket-option">
<label>Child/OAP:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="child_oap" min="0" value="0">
</div>
<div class="ticket-option">
<label>Young Child:</label>
<input type="number" class="ticket-qty" data-type="ringside-row-3" data-option="young_child" min="0" value="0">
</div>
</div>
</div>
<!-- Add additional ticket types and options as needed -->
</div>
<div class="ticket-summary">
<h3>Total Summary</h3>
<div class="total-info">
<p>Total Tickets: <span id="total-tickets">0</span></p>
<p>Total Cost: £<span id="total-cost">0.00</span></p>
</div>
</div>
JS：
jQuery(document).ready(function($) {
const ticketPrices = {
grandstand: {
adult: 20,
child_oap: 15,
young_child: 10
},
grandstand_side: {
adult: 25,
child_oap: 18,
young_child: 12
},
ringside_row_1: {
adult: 30,
child_oap: 22,
young_child: 15
},
ringside_row_2: {
adult: 35,
child_oap: 25,
young_child: 18
},
ringside_row_3: {
adult: 40,
child_oap: 30,
young_child: 20
}
};
$('.ticket-qty').on('input', function() {
var currentType = $(this).data('type');
var activeQuantity = parseInt($(this).val()) || 0;
// Disable all inputs initially
$('.ticket-qty').prop('disabled', true);
// Enable inputs for the current ticket type
$('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
var totalTickets = 0;
var totalCost = 0;
$('.ticket-qty').each(function() {
var ticketType = $(this).data('type');
var ticketOption = $(this).data('option');
var quantity = parseInt($(this).val()) || 0;
if (quantity > 0) {
$(this).closest('.ticket-type').addClass('active');
} else {
$(this).closest('.ticket-type').removeClass('active');
}
if (ticketPrices[ticketType] && ticketPrices[ticketType][ticketOption]) {
var ticketCost = ticketPrices[ticketType][ticketOption];
totalTickets += quantity;
totalCost += quantity * ticketCost;
}
if ($(this).val().trim() === '') {
$(this).val('0');
}
});
// Check if all inputs of the active row are 0 to enable other rows
if (activeQuantity === 0) {
$('.ticket-qty').not('.ticket-qty[data-type="' + currentType + '"]').prop('disabled', false);
}
$('#total-tickets').text(totalTickets);
$('#total-cost').text(totalCost.toFixed(2));
});
});
我快速检查了你的 HTML 和 JS 代码，我发现“-”上应该使用“_”代替。
data-type="grandstand-side"data-type="grandstand_side"ringside-row-1ringside_row_1在编写可变代码时尽量避免使用
-_