jQuery实现T恤订单插件点击元素控制对应区块元素显隐求助

我来帮你搞定这个T恤订单的颜色互斥需求！先明确核心逻辑：用户点击某款T恤的颜色选项后，其他T恤款式里的相同颜色要隐藏；再次点击取消选中时，如果没有其他款式选这个颜色，就恢复显示。

先给你一个标准的HTML结构参考（如果你的结构类似，直接适配即可） #

<!-- 每个T恤款式是一个独立区块 -->
<div class="t-shirt-option">
  <h3>基础款T恤</h3>
  <div class="color-options">
    <span class="color" data-color="red">红色</span>
    <span class="color" data-color="blue">蓝色</span>
    <span class="color" data-color="green">绿色</span>
    <span class="color" data-color="black">黑色</span>
  </div>
</div>

<div class="t-shirt-option">
  <h3>印花款T恤</h3>
  <div class="color-options">
    <span class="color" data-color="red">红色</span>
    <span class="color" data-color="blue">蓝色</span>
    <span class="color" data-color="green">绿色</span>
    <span class="color" data-color="black">黑色</span>
  </div>
</div>

<div class="t-shirt-option">
  <h3>宽松款T恤</h3>
  <div class="color-options">
    <span class="color" data-color="red">红色</span>
    <span class="color" data-color="blue">蓝色</span>
    <span class="color" data-color="green">绿色</span>
    <span class="color" data-color="black">黑色</span>
  </div>
</div>

加一点基础样式，让交互更直观 #

.color {
  display: inline-block;
  padding: 8px 16px;
  margin: 4px;
  background-color: #f0f0f0;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* 选中状态样式 */
.color.selected {
  background-color: #2563eb;
  color: white;
}

/* 隐藏状态样式 */
.color.hidden {
  display: none;
}

核心JavaScript逻辑（实现颜色互斥功能） #

// 获取所有颜色选项元素
const colorSpans = document.querySelectorAll('.color');

// 给每个颜色选项绑定点击事件
colorSpans.forEach(span => {
  span.addEventListener('click', function() {
    // 切换当前颜色的选中状态
    this.classList.toggle('selected');
    
    // 获取当前选中的颜色值和所在的T恤款式区块
    const currentColor = this.dataset.color;
    const currentTshirtBlock = this.closest('.t-shirt-option');
    
    // 遍历所有其他T恤款式区块
    document.querySelectorAll('.t-shirt-option').forEach(block => {
      if (block !== currentTshirtBlock) {
        // 找到当前区块中对应颜色的选项
        const targetColorSpan = block.querySelector(`.color[data-color="${currentColor}"]`);
        if (!targetColorSpan) return;
        
        // 如果当前颜色被选中，隐藏其他区块的同色选项
        if (this.classList.contains('selected')) {
          targetColorSpan.classList.add('hidden');
          // 同时取消其他区块同色选项的选中状态（避免冲突）
          targetColorSpan.classList.remove('selected');
        } else {
          // 检查是否有其他区块还选中了这个颜色
          const hasOtherSelected = Array.from(colorSpans).some(s => {
            return s !== this && s.dataset.color === currentColor && s.classList.contains('selected');
          });
          
          // 如果没有其他区块选中该颜色，恢复显示
          if (!hasOtherSelected) {
            targetColorSpan.classList.remove('hidden');
          }
        }
      }
    });
  });
});

逻辑说明 #

1. 选中状态切换：点击颜色时，先切换自身的selected类，标记是否选中该颜色。
2. 定位关联元素：通过closest()找到当前颜色所在的T恤区块，避免影响自身区块的颜色选项。
3. 同色隐藏/恢复：
   • 当选中某颜色时，遍历其他所有T恤区块，隐藏里面的相同颜色选项，同时取消它们的选中状态。
   • 当取消选中某颜色时，先检查是否还有其他区块选中了该颜色，如果没有，就恢复所有其他区块的同色选项显示。

这样就能完美实现“不同T恤款式不能选择相同颜色”的需求啦！

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