如何实现点击size-value时切换显示data-id匹配的sku-value？

架构老林

2026-10-5

修改方案

你只需要在原有点击事件的逻辑里，新增匹配对应data-id的sku-value切换显示状态的逻辑即可，同时注意修复原有代码中$this未定义的问题，完整代码如下：

$(document).ready(function(){
  // 初始化默认显示第一个sku
  $('.sku-value:first').addClass('active');

  $('.attributes').find('.size-value').on('click', function(){
    // 先获取当前点击元素的jQuery对象，修复原有未定义问题
    const $this = $(this);
    const currentId = $this.data('id');

    if ($this.hasClass('active')) {
      $this.removeClass('active');
      // 如果取消了size的选中，这里可以按需调整逻辑：比如默认显示第一个sku，或者全部隐藏
      $('.sku-value').removeClass('active');
      $('.sku-value:first').addClass('active');
    } else {
      // 切换size的选中状态
      $this.closest('.size-values').find('.size-value').removeClass('active');
      $this.addClass('active');
      // 切换对应sku的显示
      $('.sku-value').removeClass('active');
      $(`.sku-value[data-id="${currentId}"]`).addClass('active');
    }
  });
});