卡牌游戏中如何从父元素移除类？翻回功能报错求助

看起来你的问题出在原生DOM与jQuery对象的混淆以及方法调用错误上，咱们一步步拆解修复：

错误根源分析 #

1. 元素类型混淆：你用this.querySelector('i')存入数组的是原生DOM元素，不是jQuery包装后的对象，直接调用.parent()、.toggle()这类jQuery方法自然会报错。
2. 方法调用错误：
   • 原代码里的parents.toggle是错误写法：jQuery中获取直接父元素是.parent()（必须带括号），.parents()是获取所有祖先元素，这里你只需要卡牌的直接父容器；
   • toggle('open')用法不对：toggle()是用来切换元素显示/隐藏状态的，操作CSS类应该用toggleClass('open')，而这里因为是确定要把不匹配的卡牌翻回，直接用removeClass('open')更精准。
3. 遗漏第一张卡牌的处理：原代码只操作了openedCardsList[1]，但数组里的第一张卡牌openedCardsList[0]也需要执行翻回操作，不然会保持翻转状态。

修复后的代码（两种方案） #

方案1：基于jQuery的修复 #

如果你继续用jQuery操作，需要先把原生DOM元素包装成jQuery对象：

function unFlip() {
  // 处理第一张卡牌：转成jQuery对象后获取父元素，移除open类
  $(openedCardsList[0]).parent().removeClass('open');
  // 处理第二张卡牌
  $(openedCardsList[1]).parent().removeClass('open');
  // 清空已翻开卡牌的数组
  openedCardsList = [];
  console.log('unflipped');
}

方案2：原生JS实现（无需jQuery） #

如果不想依赖jQuery，用原生DOM API也能轻松完成：

function unFlip() {
  // 原生JS获取父元素，移除open类
  openedCardsList[0].parentElement.classList.remove('open');
  openedCardsList[1].parentElement.classList.remove('open');
  openedCardsList = [];
  console.log('unflipped');
}

额外说明 #

• 如果你原本的逻辑是需要让卡牌在翻转/未翻转状态来回切换，可以把removeClass换成toggleClass（jQuery）或者classList.toggle()（原生JS）；
• 建议统一你的DOM操作风格：要么全程用jQuery，要么全程用原生JS，避免混用导致类似的混淆问题。

内容的提问来源于stack exchange，提问作者3noki