多product-sizes容器下表格切换失效修复及原生JS实现

问题根源是单个容器时用全局选择器（比如$('.inch-table')）会选中唯一的目标元素，但多个容器时会选中所有匹配的表格，导致操作影响所有容器，而非当前触发事件的容器内的元素。

jQuery修复方案 #

核心是将操作范围限定在当前select所在的.product-sizes容器内，通过closest()定位父容器，再用find()在容器内查找目标表格：

修复后代码 #

$('.product-sizes select').change(function() {
  // 获取当前select所在的父容器
  const $currentContainer = $(this).closest('.product-sizes');
  const selectedUnit = $(this).val();

  if (selectedUnit === 'inch') {
    $currentContainer.find('.inch-table').show();
    $currentContainer.find('.cm-table').hide();
  } else {
    $currentContainer.find('.cm-table').show();
    $currentContainer.find('.inch-table').hide();
  }
});

关键说明 #

• $(this).closest('.product-sizes')：从当前触发事件的select元素向上查找最近的.product-sizes容器，确保只操作当前容器内的元素。
• $currentContainer.find(...)：在限定的容器内查找目标表格，避免影响其他容器的元素。

原生JavaScript实现方案 #

思路和jQuery一致，通过DOM API定位当前容器，限定操作范围：

方案1：事件委托（推荐，支持动态添加的容器） #

document.addEventListener('change', function(e) {
  // 仅处理.product-sizes下的select元素
  if (!e.target.matches('.product-sizes select')) return;

  const currentContainer = e.target.closest('.product-sizes');
  const selectedUnit = e.target.value;

  // 获取当前容器内的两个表格
  const inchTable = currentContainer.querySelector('.inch-table');
  const cmTable = currentContainer.querySelector('.cm-table');

  // 切换显示状态（表格默认display为table，需对应设置）
  inchTable.style.display = selectedUnit === 'inch' ? 'table' : 'none';
  cmTable.style.display = selectedUnit === 'cm' ? 'table' : 'none';
});

方案2：直接绑定事件 #

// 获取所有.product-sizes下的select元素
const sizeSelects = document.querySelectorAll('.product-sizes select');

sizeSelects.forEach(select => {
  select.addEventListener('change', function() {
    const currentContainer = this.closest('.product-sizes');
    const selectedUnit = this.value;

    const inchTable = currentContainer.querySelector('.inch-table');
    const cmTable = currentContainer.querySelector('.cm-table');

    inchTable.style.display = selectedUnit === 'inch' ? 'table' : 'none';
    cmTable.style.display = selectedUnit === 'cm' ? 'table' : 'none';
  });
});

其他优化方案（更灵活的实现） #

通过data-*属性关联select选项和表格，无需硬编码类名，支持扩展更多单位：

HTML结构调整 #

<div class="product-sizes">
  <select>
    <option value="inch">英寸</option>
    <option value="cm">厘米</option>
    <!-- 可新增其他单位选项 -->
  </select>
  <table class="size-table" data-unit="inch">...</table>
  <table class="size-table" data-unit="cm">...</table>
  <!-- 可新增其他单位表格 -->
</div>

jQuery实现 #

$('.product-sizes select').change(function() {
  const $currentContainer = $(this).closest('.product-sizes');
  const targetUnit = $(this).val();

  // 隐藏当前容器内所有单位表格
  $currentContainer.find('.size-table').hide();
  // 显示选中单位的表格
  $currentContainer.find(`.size-table[data-unit="${targetUnit}"]`).show();
});

原生JavaScript实现 #

document.addEventListener('change', function(e) {
  if (!e.target.matches('.product-sizes select')) return;

  const currentContainer = e.target.closest('.product-sizes');
  const targetUnit = e.target.value;

  // 隐藏所有表格
  const allTables = currentContainer.querySelectorAll('.size-table');
  allTables.forEach(table => table.style.display = 'none');
  // 显示目标表格
  const targetTable = currentContainer.querySelector(`.size-table[data-unit="${targetUnit}"]`);
  if (targetTable) targetTable.style.display = 'table';
});

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