jQuery动态主/子类别选择器两大功能问题求助

嘿，我来帮你搞定这两个困扰你的问题！下面分点给你具体的修复思路和代码示例：

问题1：让每个post-item实例的子类别.container函数独立运行 #

当前只有第一个post-item能处理子类别，是因为你的代码大概率是全局绑定了事件，没有针对每个post-item实例做独立的上下文处理。我们可以通过遍历每个post-item，给每个实例内部的控件单独绑定逻辑来解决：

修复代码示例： #

// 遍历每个post-item，确保每个实例的逻辑独立
$('.post-item').each(function() {
  const $currentPost = $(this);
  // 获取当前post-item内的所有子类别按钮和输入框
  const $subBtns = $currentPost.find('.sub-btn');
  const $subInputs = $currentPost.find('.sub-input');

  // 给当前post-item内的子类别按钮绑定点击事件
  $subBtns.on('click', function() {
    const targetSubId = $(this).attr('for');
    // 仅在当前post-item范围内查找对应的子类别容器
    const $targetContainer = $currentPost.find(`#${targetSubId}-container`);
    
    // 这里写你的子类别显示/隐藏逻辑，比如：
    $currentPost.find('.sub-category-container').hide();
    $targetContainer.show();
  });
});

这样每个post-item的子类别交互都会独立运行，不会互相干扰。

问题2：预设sub-item关联主类别并实现初始切换效果 #

现在预设的comb子类别无法关联回主类别cat1，是因为只静态设置了radio，没有触发主类别选中的初始化逻辑。我们需要在页面加载时手动触发主类别选择事件，同时选中预设子类别：

步骤1：给sub-item添加主类别标识（修改HTML） #

先给预设的sub-input加上主类别关联的data属性，方便后续筛选：

<label class="sub-btn" for="comb">
  <input class="sub-input" id="comb" type="radio" name="radios" data-main-cat="cat1" />
</label>

步骤2：初始化时自动关联主类别并触发逻辑（JS代码） #

$(document).ready(function() {
  // 预设的子类别ID
  const presetSubId = 'comb';
  // 找到预设的子类别输入框
  const $presetSubInput = $(`#${presetSubId}`);
  // 找到对应的主类别cat1的输入框（假设主类别radio的name是"main-category"，value是"cat1"）
  const $targetMainCat = $(`input[name="main-category"][value="cat1"]`);

  // 1. 先选中主类别radio并触发change事件，加载该类别下的所有子类别
  $targetMainCat.prop('checked', true).trigger('change');

  // 2. 选中预设的子类别radio并触发change事件，显示对应的子类别列表
  $presetSubInput.prop('checked', true).trigger('change');
});

补充：主类别切换时的子类别筛选逻辑 #

确保主类别切换时，只显示对应类别的子类别，这样预设的comb只会在cat1选中时出现：

// 主类别radio的change事件
$('input[name="main-category"]').on('change', function() {
  const selectedMainCat = $(this).val();
  // 遍历所有子类别按钮，根据data-main-cat筛选显示
  $('.sub-btn').each(function() {
    const $subBtn = $(this);
    const subCatMain = $subBtn.find('.sub-input').data('main-cat');
    $subBtn.toggle(subCatMain === selectedMainCat);
  });
});

这样初始加载后，主类别会自动选中cat1，所有属于cat1的子类别（包括comb）都会显示，且comb处于选中状态，对应的子类别列表也会自动展示，和手动选择的效果完全一致。

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