调试jQuery代码以实现全票种数量与金额总计功能

问题背景 #

开发一个票务组件，包含多个票种，每个票种下有3种票型，核心需求：

• 用户输入某一票种的数量时，禁用其他票种的输入选项
• 用户清空该票种数量或设为0时，重新启用其他票种的输入选项
• 总计区域实时显示总票数和总金额

当前启用/禁用功能正常，但仅能计算第一行票种的总计，输入其他票种数值时无法计入统计。

问题根源 #

你的ticketPrices对象中，票种键名使用下划线（如grandstand_side、ringside_row_1），但HTML里data-type属性值用的是连字符（如grandstand-side、ringside-row-1），两者不匹配，导致计算时无法找到对应票种的价格，进而无法统计其他票种的金额和数量。

修复方案 #

将ticketPrices的键名改为与HTMLdata-type一致的连字符格式，同时优化禁用逻辑（原逻辑中单个输入框设为0就启用其他票种，改为检查当前票种所有输入框是否全为0再处理）。

修复后的完整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() {
    const currentType = $(this).data('type');
    
    // 检查当前票种所有输入框是否全为0
    const isCurrentTypeAllZero = $('.ticket-qty[data-type="' + currentType + '"]').toArray().every(input => parseInt(input.value) || 0 === 0);

    // 禁用/启用逻辑：当前票种有非0值则禁用其他，否则全部启用
    $('.ticket-qty').each(function() {
      const type = $(this).data('type');
      $(this).prop('disabled', !isCurrentTypeAllZero && type !== currentType);
    });

    let totalTickets = 0;
    let totalCost = 0;

    $('.ticket-qty').each(function() {
      const ticketType = $(this).data('type');
      const ticketOption = $(this).data('option');
      const quantity = parseInt($(this).val()) || 0;

      // 空值自动设为0
      if ($(this).val().trim() === '') {
        $(this).val('0');
      }

      // 切换票种的active状态
      $(this).closest('.ticket-type').toggleClass('active', quantity > 0);

      // 累加总计，确保价格存在
      if (ticketPrices[ticketType] && ticketPrices[ticketType][ticketOption]) {
        totalTickets += quantity;
        totalCost += quantity * ticketPrices[ticketType][ticketOption];
      }
    });

    // 更新总计显示
    $('#total-tickets').text(totalTickets);
    $('#total-cost').text(totalCost.toFixed(2));
  });
});

关键修复点 #

1. 键名匹配：统一ticketPrices键名与HTMLdata-type格式，确保价格能被正确获取
2. 逻辑优化：改为检查当前票种所有输入框的总和状态，避免单个输入框设为0就误启用其他票种的问题
3. 代码顺序调整：先处理空值设为0，再进行数量判断，逻辑更清晰

内容的提问来源于stack exchange，提问作者codingpupil