JS/jQuery实现点击色块显示title匹配productTrim的bundle--form

你的代码没生效是三个核心逻辑错误导致的：

• 先把所有.bundle--form父容器全部设置为隐藏，后续再调用.show()显示容器内部的a标签，父元素处于隐藏状态时，内部子元素无论怎么设置都无法展示
• 用[style="display: block;"]匹配当前选中的商品容器非常脆弱，只要display属性值多一个空格、或者样式是通过CSS类控制的，就会匹配失败
• 额外取BundleName做等值判断属于冗余逻辑，多做了一次DOM查询还容易因为属性值带特殊字符出现匹配异常

$(function() {
  // 绑定色块点击事件
  $('.icon--drop').on('click', function () {
    // 获取当前展示的商品名，去除首尾空白字符
    const currentProductName = $.trim($('.super-color-variant:visible .product--title').text());
    
    // 第一步：先隐藏所有套餐表单
    $('.bundle--form').hide();
    // 第二步：筛选出内部a标签title和当前商品名完全匹配的套餐容器，直接显示该容器
    $('.bundle--form').has(`.bundle--product-name a[title="${currentProductName}"]`).show();
  });

  // 页面加载完成后默认执行一次匹配，首屏就展示正确的套餐项
  $('.color-drop-link.selected .icon--drop').trigger('click');
});

document.addEventListener('DOMContentLoaded', () => {
  const colorDots = document.querySelectorAll('.icon--drop');
  // 绑定点击事件
  colorDots.forEach(dot => {
    dot.addEventListener('click', () => {
      // 获取当前可见的商品变体标题
      const activeVariant = document.querySelector('.super-color-variant');
      const activeProductName = activeVariant.querySelector('.product--title').textContent.trim();
      
      // 遍历所有套餐容器
      document.querySelectorAll('.bundle--form').forEach(form => {
        // 先默认隐藏
        form.style.display = 'none';
        // 检查容器内是否存在匹配title的商品链接
        const isMatch = form.querySelector(`a[title="${activeProductName}"]`);
        if (isMatch) form.style.display = 'block';
      })
    })
  })

  // 初始化触发默认选中色块的点击逻辑
  document.querySelector('.color-drop-link.selected .icon--drop')?.click();
})

• 用:visible（jQuery）或者直接取激活态变体的方式匹配当前选中商品，避免硬编码style属性值导致的匹配失败
• 直接操作套餐父容器的显示/隐藏，不要在父容器隐藏的状态下修改子元素的显示属性，属于无效操作
• 用.has()（jQuery）或querySelector判断父容器内是否存在目标元素，比单独取属性值做字符串比对更可靠，还能减少DOM查询次数
• 增加初始化执行逻辑，页面首次加载不需要用户点击就能展示匹配的套餐项，体验更完整

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