CodeSandbox开发记忆游戏：卡片按钮条件渲染问题求助

嘿，我来帮你搞定这个记忆游戏的样式冲突和交互逻辑问题！

一、先解决「buttonMask类覆盖原有样式」的问题 #

你之前给父div加buttonMask导致样式冲突，本质是因为这个类的样式优先级过高或者直接重置了子元素样式。推荐换个思路，给每个卡片单独做「正面（图标）+背面（遮罩）」的分层结构，完全不需要依赖父类来控制显示，从根源避免样式冲突：

1. 卡片HTML结构示例

<div class="card-container">
  <!-- 每张卡片是一个容器，包含正面（图标）和背面（遮罩） -->
  <div class="memory-card">
    <div class="card-front">🎈</div>
    <div class="card-back"></div>
  </div>
  <div class="memory-card">
    <div class="card-front">🎈</div>
    <div class="card-back"></div>
  </div>
  <!-- 更多卡片... -->
</div>

2. 核心CSS样式（无冲突版本）

.memory-card {
  position: relative;
  width: 100px;
  height: 100px;
  cursor: pointer;
  /* 保留你原有的卡片样式，比如边框、圆角等 */
  border: 2px solid #ddd;
  border-radius: 8px;
}

.card-front, .card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  transition: all 0.3s ease;
}

/* 初始状态：背面显示，正面隐藏 */
.card-back {
  background-color: #f0f0f0;
  /* 可以加个简单的图案当背面 */
  background-image: repeating-linear-gradient(45deg, #ddd 0px, #ddd 2px, transparent 2px, transparent 4px);
}
.card-front {
  font-size: 32px;
  opacity: 0;
  visibility: hidden;
}

/* 点击后翻转：显示正面，隐藏背面 */
.memory-card.flipped .card-front {
  opacity: 1;
  visibility: visible;
}
.memory-card.flipped .card-back {
  opacity: 0;
  visibility: hidden;
}

这种方式完全不需要父元素的buttonMask类，所有显示控制都通过给单个卡片加flipped类实现，不会干扰原有样式。

二、完善「不匹配时重新隐藏卡片」的交互逻辑 #

结合你已实现的「匹配移除」功能，我们用状态变量+定时器来控制点击流程，避免连续点击导致的bug：

JS代码示例

const cards = document.querySelectorAll('.memory-card');
let openCards = [];
let isProcessing = false; // 锁定状态，防止连续点击

cards.forEach(card => {
  card.addEventListener('click', () => {
    // 过滤无效点击：正在处理中、已翻开、已翻开两张
    if (isProcessing || card.classList.contains('flipped') || openCards.length >= 2) {
      return;
    }

    // 翻开当前卡片
    card.classList.add('flipped');
    openCards.push(card);

    // 已翻开两张，判断匹配
    if (openCards.length === 2) {
      isProcessing = true;
      const [card1, card2] = openCards;
      const icon1 = card1.querySelector('.card-front').textContent;
      const icon2 = card2.querySelector('.card-front').textContent;

      if (icon1 === icon2) {
        // 匹配成功：执行你已有的移除逻辑
        setTimeout(() => {
          card1.remove();
          card2.remove();
          openCards = [];
          isProcessing = false;
        }, 500); // 延迟一下，让用户看到匹配结果
      } else {
        // 匹配失败：翻转回去
        setTimeout(() => {
          card1.classList.remove('flipped');
          card2.classList.remove('flipped');
          openCards = [];
          isProcessing = false;
        }, 1000); // 给用户1秒时间记住两张卡片
      }
    }
  });
});

三、如果你一定要用buttonMask类的替代方案 #

要是你坚持想用父类来控制遮罩，可以用伪元素替代直接覆盖子元素样式，这样不会破坏原有卡片的样式：

.buttonMask .memory-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border-radius: inherit;
  z-index: 1;
}

.buttonMask .memory-card.flipped::after {
  display: none;
}

这个伪元素会作为遮罩层覆盖在卡片上，点击后给卡片加flipped类就能隐藏遮罩，完全不影响卡片本身的样式。

内容的提问来源于stack exchange，提问作者Kevin T.