如何构造if...else语句使匹配卡片时返回true？

看来你在做卡片记忆游戏的匹配逻辑时卡壳了——当前的判断逻辑总是返回false，不管是用jQuery的.is()还是直接比较元素引用都没法正确识别匹配的卡片。这问题出在你判断的逻辑上：你现在是在比较两个DOM元素的引用地址，但即使是同类型的卡片，它们也是两个独立的DOM节点，引用肯定不一样，所以永远返回false。咱们得换个思路，通过卡片的业务标识来判断匹配，比如用自定义属性或者类名来标记同组卡片。

先说说原代码的问题 #

• $(openedCardsList[0]).is(openedCardsList[1])：.is()方法只有当传入的元素是同一个DOM节点时才会返回true，而你要匹配的是两张内容相同的不同卡片，所以这个判断永远不成立。
• openedCardsList[0]===openedCardsList[1]：同样是在比较元素引用，结果和上面一样，永远为false。
• 代码里$(openedCardsList[1]).toggleClass('open show');的写法有点冗余，统一处理类名会更清晰。

纯jQuery版本重构 #

假设你的卡片元素都带有一个用来标记匹配组的自定义属性，比如data-card（比如<div class="card" data-card="diamond">），我们通过这个属性来判断是否匹配：

function checkForMatch() {
  // 先确保数组里确实有两张打开的卡片
  if (openedCardsList.length !== 2) return;

  const $card1 = $(openedCardsList[0]);
  const $card2 = $(openedCardsList[1]);

  // 比较两张卡片的自定义标识属性
  if ($card1.data('card') === $card2.data('card')) {
    // 匹配成功：移除打开状态类，添加匹配类
    $card1.removeClass('open show').addClass('match');
    $card2.removeClass('open show').addClass('match');
  } else {
    // 不匹配：执行翻回逻辑
    unFlip();
  }

  // 清空已打开卡片数组，准备下一轮
  openedCardsList = [];
}

纯DOM版本重构 #

如果不用jQuery，用原生DOM API实现的话，逻辑完全一致，只是用原生方法操作元素：

function checkForMatch() {
  if (openedCardsList.length !== 2) return;

  const card1 = openedCardsList[0];
  const card2 = openedCardsList[1];

  // 通过dataset获取自定义属性值进行比较
  if (card1.dataset.card === card2.dataset.card) {
    // 匹配成功：操作类名
    card1.classList.remove('open', 'show');
    card1.classList.add('match');
    card2.classList.remove('open', 'show');
    card2.classList.add('match');
  } else {
    unFlip();
  }

  openedCardsList = [];
}

关键说明 #

1. 标识属性的选择：你可以根据自己的HTML结构调整标识方式，比如用特定的类名（比如card-diamond），这时候判断逻辑就改成$card1.hasClass('card-diamond') && $card2.hasClass('card-diamond')（jQuery）或者card1.classList.contains('card-diamond') && card2.classList.contains('card-diamond')（原生），但自定义属性的方式更灵活通用。
2. 边界判断：增加数组长度检查，避免数组元素不足时出现报错。
3. 代码整洁性：统一移除open show类并添加match类，比用toggleClass更直观，避免状态混乱。

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